Question

我想'ajaxify'标准链接。我正在使用jQuery on（）函数拦截点击并动态检索内容：

$('.nextLink').on("click", function(e) {
    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url, null, function(response) {
        $('#searchResults').replaceWith(response);
    });
});

这很好用，除了标准链接行为仍然出现，所以我使用ajax获取内容，然后通过整页刷新擦除。我尝试从处理程序返回false以阻止正常提交

$('.nextLink').on("click", function(e) {
    ...
    return false;
}

然而，这也有效，我在ajax加载的内容中也有链接。我的理解是jQuery的on（）函数应该重新绑定使用ajax加载的内容的处理程序，但似乎添加return false可以防止这种情况发生。

所以我似乎处于catch-22状态，我可以允许事件冒泡发生，这允许'on（）'正常工作但是我也得到非ajax提交，或者我可以阻止标准提交但会中断on()

有人能告诉我处理这种情况的最佳方法吗？

非常感谢

Answer 1

...除了标准链接行为仍然存在以外，这样工作正常所以我使用ajax获取内容但是它被整页刷新擦除...

使用preventDefault()停止默认操作

$('.nextLink').on("click", function(e) {
   e.preventDefault();
   ...

还要绑定新添加元素上的处理程序，您需要使用事件委派来捕获.nextLink父元素上的click事件，例如与

 $('#searchResults').on("click", ".nextLink", function(e) ...

请参阅jQuery docs

上的（）用法

Answer 2

您希望自己的文档能够收听.nextLink个链接，不管它们是否在一开始就存在：

$(document).on("click", '.nextLink', function(e) {

    e.preventDefault();

    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url, null, function(response) {
        $('#searchResults').replaceWith(response);
    });

});

通过这种方式，您可以收听.nextLink上的活动，无论它们何时创建，请检查jQuery on() docs。

Answer 3

在新加载的内容上重新注册click处理程序很容易，因此您不必使用事件委派：

function doload(ev) {
    ev.preventDefault();

    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url).done(function(response) {
        $('#searchResults').replaceWith(response);
        $('#searchResults .nextLink').on('click', doload);  // re-register new content
    });
}

$('.nextLink').on('click', doload);

带有ajax加载内容的jQuery on（）

3 个答案: