web-dev-qa-db-ja.com

jQueryバインディングAJAX呼び出し後のリンクへのクリック

私は激怒しています-おそらく誰かがこれを手伝ってくれるでしょう。

AJAXを呼び出した後、クリックをリンクに再度バインドする必要がありますが、何らかの理由で機能しません。

これが私のコードです：

if ($('.active').length > 0) {
    $('.active').click(function() {
        var elem = $(this);
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
                elem.replaceWith(data);                                                     
            }       
        });         
        $('.active').bind('click'); return false;           
    });
}

何か案が？

回答ありがとうございます。コードを修正しましたが、問題はまだ残っています。

function makeActive() {
    if ($('.active').length > 0) {
        $('.active').click(function() {
            var elem = $(this);
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                dataType: 'html',
                success: function(data) {
                    elem.replaceWith(data);                             
                }       
            }); 
            $('.active').live('click', makeActive);     
            return false;           
        });
    }
}


$('.active').live('click', makeActive);
jquerybind
19
user398341

再バインドを実行する場合は、successハンドラーに再バインドを追加する必要がありますafter Ajax呼び出し：

_success: function(data) {
    elem.replaceWith(data);
    $('.active').bind('click', /* some function needs to go here*/);
}
_

つまり、この場合は live() または delegate() がおそらくより良いオプションです[ update：jQuery 1.7がリリースされたので、すべてを .on()] で実行できます。これにより、置き換えられていない他の_.active_リンクがある場合に、クリックハンドラーが二重に割り当てられることもなくなります。

更新：更新されたコードについて：liveの使用方法は、その目的を無効にします。 ドキュメント をお読みください。あなたがしていることは、リンクがクリックされたときにクリックハンドラを割り当てることです。つまり、クリックハンドラを何度も追加しています。

これはコードの改良版です。

_$('.active').live('click', function(event) {
    var elem = $(this);
    var url = $(this).attr('href');
     $.ajax({
         url: url,
         dataType: 'html',
         success: function(data) {
              elem.replaceWith(data);                             
         }       
     });    
     event.preventDefault();
     event.stopPropagation();
});
_
21
Felix Kling

[〜＃〜]更新[〜＃〜]2012年10月31日

JQuery 1.7以降、推奨されるアプローチは on -

$(document).on('click', '.active', function () {
    // click handler code goes here
});

次のことを試すことができますか？

$('.active').live('click', function()
{
    // click handler
});
32
MD Sayem Ahmed