如何将jQuery .live()与ajax一起使用

时间:2010-03-04 03:12:10

标签: javascript ajax jquery

目前我正在使用John Resig's LiveQuery plugin/function来允许用户对列表项的长无序列表进行排序。代码如下:$('input#q').liveUpdate('ul#teams').focus();当我使用ajaxified选项卡对列表进行排序时,会出现问题。基本上我使用ajax来引入不同的列表,而liveUpdate()函数无法访问新的li。

我认为我需要使用.live() function绑定它。但我不清楚如何将其绑定到ajax事件,我只使用了“click”事件。如何将新liveUpdate()绑定到新加载的列表项?

修改 ajax选项卡通过wordpress ajax api运行,所以代码相当复杂,但简化它是这样的:

$('div.item-list-tabs').click( function(event) {
    var target = $(event.target).parent();

    var data = {action, scope, pagination}; // Passes action to WP that loads my tab data
    $.post( ajaxurl, data, function(response) {
        $(target).fadeOut( 100, function() {
            $(this).html(response);
            $(this).fadeIn(100);
        });
     });

     return false;
});

为了进行此对话,这是简化的,但基本上$.post加载到位的响应.liveUpdate()无法访问它。我相信.live()函数是这个问题的答案,我不清楚如何使用$.post()

来实现它

5 个答案:

答案 0 :(得分:4)

正如JQuery文档中提到的,.live()被认为已弃用。您应该使用方法.on()代替。

$("#yourSelector").on("click", function() {
    // statement
});

要管理选择器类型的futur对象,您可以像这样使用.on()

$(document).on("click", "#yourSelector", function() {
    // statement
});

答案 1 :(得分:1)

尝试使用jQuery's Ajax Events

$('input#q').ajaxComplete(function(){
    $(this).liveUpdate('ul#teams').focus();

    $(this).unbind('ajaxStop');
});

答案 2 :(得分:1)

我也只是使用

而遇到了麻烦
$('selector').click(function(.. 
在Ajax调用之后,终于发现我们需要使用

$('selector').live("click", function(){.. 

或新方法

$(document).on('click', 'selector', function(){..

为Ajax调用后创建的新元素绑定事件。

$(document).on('click','selector', function(event){
//your code    
});

直播

$('selector').live('click', function(event){    
//your code    
});

答案 3 :(得分:0)

$('input#q').live(function() {
   $(this).liveUpdate('ul#teams').focus();
});

答案 4 :(得分:0)

$("div.item-list-tabs").live("click",function(){
//statements..
});