Question

所以想象一下这个场景，我有一个列表，它有一些分页，当用户点击下一个，链接被jQuery劫持，它使用$.ajax函数（我已经在下面提供）去获取下一页内容并将其显示在原始容器中。这包括分页链接以及我们希望它们也更新。

第一页更改工作正常，但在此阶段我们已经失去了link元素和jQuery规则之间的绑定：

$('#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)
});

我有什么选择来维护事件和函数之间的绑定？

作为参考，这是$.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"
    });
}

谢谢！： - ）

修改

嗯，刚刚找到this question ...正在调查： - ）

Answer 1

尝试使用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函数：

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

Answer 2

方法.live（）它已经在jQuery的1.9顶点上删除了，而是建议使用方法.on（）。

但是如果你有一个元素列表，你可以用他们的类名包装这些元素，如$（“。view-page”）。on（“click”，function（）{}）;并且您加载了同一个类的另一个元素块（如分页页面），绑定将丢失。

旧的.live（）方法解决了这个问题（“为现在和将来与当前选择器匹配的所有元素附加事件处理程序。”）但你可以通过以下方式执行相同的操作以另一种形式使用.on（）：

$(document).on("click", ".view-page", {}, function(event){
    // anything you want to do...
});

即使元素块在您的分页区域发生更改，也不会松散绑定，因为您告诉jQuery任何时候DOM中的所有内容都会出现此行为。

Answer 3

您的分页链接是否也通过ajax加载替换？如果是这样，它们是新的DOM元素，并且原始的分页元素（具有绑定的事件处理程序）不再存在。如果是这种情况，请查看jQuery的.live（）方法来绑定您的点击处理程序。

Answer 4

您可以在AJAX调用的回调函数中重新绑定事件。

 complete: function () {
        /* if all ajax requests have completed, unblock screen */
        if(--ajax_count==0) {
            $.unblockUI();


        }
        $('#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)
        });


    }

jQuery，AJAXed内容失去了它的绑定

4 个答案: