4

jQuery を使用して、コーディング中のアプリのコメントの [編集] ボタンを管理しています。私document.readyの には、次のものがあります。

$('.edit-button').click(function(){
// Code to trigger the editing interface for parent comment
});

また、jQuery を使用して、ページを更新せずに新しく投稿されたコメントを表示しています。関連する$.ajax()関数内で、. を使用して新しいコメントを DOM に書き込みます$.before(data)。問題は、.edit-button内dataの に前述の$.click()適用が適用されていないことです。これは で発生するためですdocument.ready。それで、それらをクリックしても何も起こりません。

私は、Ajax関数に.jsファイルを呼び出して.jsファイルを再インクルードさせるという（非常に醜い）ソリューションを試しましたdocument.ready。.click()これは機能しますが、をすべての単一の に再適用することを除いて.edit-button、編集インターフェイスを 2 回 (または 3 回) 開きます。

$.click()では、どうすればからを再適用できますdocument.readyか? できれば、document.ready後で変更する場合に備えて、関数を別の JavaScript ファイルにコピーする必要はありません。

4

4 に答える 4

8

jQuery のバージョンに応じて、次の解決策があります。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

明らかに最後のもの.on()が最良の選択です。詳細情報.

しかし約.bind():

jQuery 1.7 の時点で、.on()メソッドは、イベント ハンドラーをドキュメントにアタッチするための推奨される方法です。以前のバージョンでは、.bind()メソッドはイベント ハンドラーを要素に直接アタッチするために使用されます。ハンドラーは、jQuery オブジェクトで現在選択されている要素に関連付けられているため、これらの要素は呼び出しが発生した時点で存在している必要があり.bind()ます。参照

あなたの問題の答えは次のようなものです：

$('.edit-button').on("click",function(){  })

また

$(document).on("click", ".edit-button", function(){  });

注: .live()jQuery の新しいバージョンでは、欠点のないより優れたメソッドが提供されるため、このメソッドの使用は推奨されなくなりました。詳しくは

.live()jQuery 1.9 のアップグレード後に削除された更新プログラム

于 2012-05-01T06:58:38.260 に答える
4

これを試して

$('body').on("click", ".edit-button", function(){

})

よりターゲットを絞ったものでボディセレクターを変更できる場合があります。

于 2012-05-01T06:37:04.840 に答える
2

AJAX を使用しているため、「live()」API を使用する必要があります。

$('.edit-button').live("click", function(){
// Code to trigger the editing interface for parent comment
});
于 2012-05-01T06:45:38.163 に答える
0

使用する

$('.edit-button').bind('click', function() {
// Code to trigger the editing interface for parent comment
});

または、コメントが投稿された後の ajax 成功関数で、次のように追加できます。

$.ajax({
    url: "some url",
    // ...
    success: function (data) {
        //comment posted successfully
        $('.edit-button').unbind("click");
        $('.edit-button').bind("click", editButtonClickHandler);
});

function editButtonClickHandler () {
    //.. handle click
}
于 2012-05-01T06:43:23.210 に答える