0

次の 2 つの手順を実行する必要があります。

1) div をクリックしたときに InputBox を表示します。2）マウスがその入力ボックスの外にあるときにdivを表示します。

ステップ 2 は機能しません。

<html>
    <title>a</title>
    <head>
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#field').click(function() {
                $(this).replaceWith( "<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
            });

            $('#field').mouseout(function() {
                $(this).replaceWith( "<div id=\"field\">" + $(this).text() + "</div>");
            });     
         });
    </script>
    </head>
    <body>
        <div id="field">hello there:)</div>
    </body>
    </html>

ありがとうございました：）

4

3 に答える 3

2

これを試して、別のIDを作成して、divが「フィールド」と言い、入力が「txtフィールド」と言うとき

$(function() {
    $('#container').on('click', '#field', function() {
        $(this).replaceWith( "<input type=\"text\" name=\"fname\" id=\"txtfield\" value=\"" + $(this).text() + "\">");
    });

     $('#container').on('mouseout', '#txtfield', function() {
        $(this).replaceWith( "<div id=\"field\">" + $(this).val() + "</div>");
    });

});

このデモをチェック

これがあなたを助けることを願っています。

于 2012-09-12T08:19:21.753 に答える
2

もちろん、アイテム自体を置き換えるため、$(this)何も参照しないため、これは機能しません。

そのため、新しい要素を作成した後にマウス アウト バインディングを呼び出す必要があります。または、メソッド http://api.jquery.com/on/#fieldを使用できます。.on

注：二重引用符保存エスケープの代わりに単一引用符を使用できます;）

$('#field').click(function () {
    $(this).replaceWith('<input  id="field" type="text" value="' + $(this).text() + '>');

    // here you must call the mouse out binding
    $('#field').mouseout(function () {
        $(this).replaceWith('<div id="field">' + $(this).text() + '</div>');
    });

});
于 2012-09-12T08:21:28.937 に答える
1

これはあなたが望むことを行います.on()。イベントを動的に作成された要素にバインドするには、メソッドを使用する必要があります。

に.on()は、2 つまたは 3 つのパラメータが必要です。最初のパラメータはイベントで、2 番目のパラメータは実行する関数またはバインド先の動的要素です。動的要素にバインドする場合は、メソッドをコンテナー要素にアタッチする必要があります。動的アタッチの場合の最後のパラメーターは、もちろん実行する関数です。

<div id="container">
    <div id="field">hello there:)</div>
</div>​

$(function() {
    $('#container').on('click', '#field', function() {
        $(this).replaceWith("<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
    });

    $('#container').on('mouseout', '#field', function() {
        $(this).replaceWith("<div id=\"field\">" + $(this).val() + "</div>");
    });

});​

更新：

$(function() {
    $('#container').on('click', '#field', function() {
        if (!$(this).is('input')) {
            $(this).replaceWith("<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
        }
    });

    $('#container').on('mouseout', '#field', function() {
        if ($(this).is('input')) {
            if ($(this).val() != '') {
                $(this).replaceWith("<div id=\"field\">" + $(this).val() + "</div>");
            }
            else {
                $(this).replaceWith("<div id=\"field\">hello there:)</div>");
            }
        }
    });

});​
于 2012-09-12T08:14:16.440 に答える