jQuery的，AJAXed内容失去它的bind [英] jQuery, AJAXed content losing it's bind

问题描述

所以，想象一下这个场景，我有一个列表，它有一个有点分页的事情，当用户点击下一个，链接的jQuery劫持，它使用了 $。阿贾克斯函数（其中我已经在下面提供）去获得下一个页面内容，并在原来的容器中显示它们。这包括分页链接以及我们希望他们更新了。

So imagine this scenario, I have a list and it has a bit of pagination going on, when the user clicks next, the link is hijacked by jQuery, it uses the $.ajax function (of which I've provided below) to go and get the next page contents and display them in the original container. This includes the pagination links as well as we want them to update too.

第一个页面变化工作得很好，但在这个阶段，我们已经失去了我们的链接元素和我们的jQuery规则之间的绑定：

The first page change works fine, but at this stage we've lost the bind between our link element and our jQuery rule:

$('#paging a').click(function(event) {
    event.preventDefault();
    getElementContents('#target_container','',$(this).attr('href'),false);
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight)
});

做什么选择我都保持事件和功能之间的绑定？

What options do I have to maintain the bind between the event and the function?

有关引用，这里是我的包装功能 $ AJAX ：

For reference, here is my wrapper function for $.ajax:

var ajax_count = 0;
function getElementContents(target,data,url,highlight) {
    if(url==null) {
        url='/';
    }
    if(data==null) {
        var data=new Array();
    }
    if(highlight==null || highlight==true) {
        highlight=true;
    } else {
        highlight=false;
    }

    $.ajax({
        url: url,
        data: data,
        beforeSend: function() {
            /* if this is the first ajax call, block the screen */
            if(++ajax_count==1) {
                $.blockUI({message:'Loading data, please wait'});
            } 
        },
        success: function(responseText) {
            /* we want to perform different methods of assignment depending on the element type */
            if($(target).is("input")) {
                $(target).val(responseText);
            } else {
                $(target).html(responseText);
            }
            /* fire change, fire highlight effect... only id highlight==true */
            if(highlight==true) {
                $(target).trigger("change").effect("highlight",{},2000)
            }
        },
        complete: function () {
            /* if all ajax requests have completed, unblock screen */
            if(--ajax_count==0) {
                $.unblockUI();
            }
        },
        cache: false,
        dataType: "html"
    });
}

谢谢！ ： - ）

Thanks! :-)

修改

嗯，刚刚发现<一href="http://stackoverflow.com/questions/2413797/how-do-you-make-jquery-bind-events-to-elements-loaded-via-ajax">this问题 ......寻找到它： - ）

hmmm, just found this question... looking into it :-)

推荐答案

请尝试使用jquery.live：

try using jquery.live:

$('#paging a').live('click', function(event) {
    event.preventDefault();
    getElementContents('#target_container','',$(this).attr('href'),false);
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight)
});

如果使用jQuery 1.9或以上，.live不再存在，所以你可以使用的。对函数：

if using jQuery 1.9 or above, .live no longer exists so you can use the .on function instead:

$(document).on('click', '#paging a', function (event) {
        event.preventDefault();
        getElementContents('#target_container','',$(this).attr('href'),false);
});

这篇关于jQuery的，AJAXed内容失去它的bind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！