gpt4 book ai didi

jQuery on() 使用 ajax 加载内容

转载 作者:行者123 更新时间:2023-12-01 08:13:13 25 4
gpt4 key购买 nike

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

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

非常感谢

最佳答案

...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() 用法

关于jQuery on() 使用 ajax 加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12195266/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com