1

我正在尝试“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()

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

非常感谢

4

3 回答 3

2

...这工作正常，除了标准链接行为仍然发生，所以我使用 ajax 获取内容，但随后它被整页刷新擦除...

用于preventDefault()停止默认操作

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

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

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

请参阅jQuery 文档上的 on() 用法

于 2012-08-30T10:55:10.130 回答
1

您希望您的文档收听.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() 文档。

于 2012-08-30T10:56:55.203 回答
0

在新加载的内容上重新注册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);
于 2012-08-30T11:04:14.830 回答