微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-通过AJAX呈现表单时,jQuery代码不适用于表单

我的应用程序使用jQuery的悬停事件,具有相当标准的星级投票功能.最初加载DOM(HTML请求)后,明星投票逻辑所在的部分就会与页面的其余部分一起呈现.但是,我想移动部分内容,以便它不会随页面一起加载,但可以在用户需要时加载.我提出了一个典型的AJAX请求来加载部分,但是当渲染部分时,星星不会对鼠标悬停等事件做出适当的反应.是因为我通过AJAX渲染表单而引发此问题,还是我的代码中只有一个bug?谢谢您的帮助

更新:使用on处理程序使其正常工作,感谢大家的帮助!

解决方法:

您可能试图将事件绑定到DOM中尚不存在的节点.解决此问题的最佳方法是绑定到Ajax请求之前存在的侦听器,该侦听器是所获取内容的祖先(有时错误地称为“父代”,它仅是祖先的一个级别).例如,给定页面本身的标记

<div id="ajaxContainer">
  <!-- content will be periodically replaced with Ajax -->
</div>

“ ajaxContainer”是您要获取的任何内容的祖先.然后,您需要使用适当的方法来绑定侦听器.在过去,您可以使用live(),但已过时,但效率却不高.那么建议是为委托人()解决效率问题.现在,它用于on()的委托侦听器语法,该语法与委托()的性能大致相同,但语法不同.

话虽如此,如果您使用的是jQuery 1.7,请使用.on().

想象一下,您的Ajax函数检索包含星型系统鼠标悬停的页面的一部分,该页面位于一系列被分类为“星”的div内.语法可能类似于:

$(document).ready(function() {
  $('#ajaxContainer').on('mouseenter', '.stars', function() {
    $this = $(this); // cache this specific instance of a stars div as a jQuery object
    // do stuff with $this
  });
});

这说:“开始在ajaxContainer内部监听与’mouse enters stars divs’相匹配的事件,并在发生这种情况时执行操作.”

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐