0

背景：私のウェブサイトには、JavaScriptとAjaxを介して編集できる値がいくつかあります。Ajaxは正常に動作しており、値を編集できますが、値を保存した後、ページをリロードせずに再度編集することはできません。

私はこれに問題を減らしました：元の要素はHTMLフォームに置き換えられます。フォームが送信されると、フォーム自体は新しいバージョンのdisplay要素に置き換えられますが、イベントリスナーは壊れています。

期待どおりに機能しないサンプルJSコード（ JSfiddle ）をいくつかまとめました。

var text = $('<em/>').text('click me!');

text.click(function() {
    var button = $('<input type="button" value="Click me, too" />');

    button.click(function() {
        $('#container').html(text);
    });

    $('#container').html(button);
})

$('#container').html(text);

何が起こるか：

  1. 表示されている現在の値
  2. テキストclickedテキストがフォームに置き換えられた後（簡単にするためにテキスト要素が保存されています）
  3. ボタンclickのテキストが再び表示された後
  4. clickテキストの場合は、手順2と同様に機能します（現在は機能しません）

オブジェクトを再度click使用すると、イベントが失われるのはなぜですか？text

4

2 に答える 2

2

構造全体を書き直さずに機能させるための1つのオプションは、バインドされたイベントを使用して要素のクローンを作成することです。

text.click(function() {
    ...
    button.click(function() {
        $('#container').html(text.clone(true));
    });
    ...
})

$('#container').html(text.clone(true));

デモ：http： //jsfiddle.net/J8Sa7/2/

于 2012-06-04T16:03:53.677 に答える
0

この.html()メソッドinnerHTMLは、プロパティをテキスト値に（再）設定します。これらの文字列にはイベントリスナーがありません-これは、文字列（および関数）.html()以外のものを受け入れるjQueryのバグだと思います。ここでは、jQueryオブジェクトも文字列化されているようです。

コンテンツを既存のDOMノードに変更するに.empty()は、コンテナー（または.remove()テキスト要素）と.append()ボタン要素を変更する必要があります。

于 2012-06-04T15:57:31.160 に答える