jQuery on() 使用 ajax 加载内容

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() 函数应该重新绑定(bind)使用 ajax 加载的内容的处理程序，但似乎添加 return false 可以防止这种情况发生。

所以看来我处于 catch-22 情况，我可以允许事件冒泡发生，这允许 'on()' 正常工作，但我也得到非 ajax 提交，或者我可以阻止标准提交，但这会破坏 on()

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

非常感谢

Answer 1

...This works fine except that the standard link behavior still occurs so I get the content using ajax but then it's wiped by a full page refresh...

使用preventDefault()停止默认操作

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

要将处理程序绑定(bind)到新添加的元素上，您需要使用事件委托(delegate)来捕获 .nextLink 父元素上的单击事件，例如与

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

查看 jQuery docs 上的 on() 用法