jQuery，AJAXed内容丢失了绑定 [英] jQuery, AJAXed content losing it's bind

问题描述

因此，请设想一下这种情况，我有一个列表，并且有一些分页，当用户单击下一步时，该链接被jQuery劫持，它使用 $.ajax 函数我在下面提供了其中的内容)以获取下一页的内容并将其显示在原始容器中.这包括分页链接，我们也希望它们也进行更新.

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.

第一个页面更改工作正常，但是在此阶段，我们已经失去了link元素和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"
    });
}

谢谢！:-)

编辑

hmmm，刚刚找到此问题 ...调查一下:-)

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不再存在，因此您可以改用.on函数:

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内容丢失了绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！