4

我有一个页面列出了我的船员（show_crew.php）。该页面使用无限滚动插件运行，就像 Google 图片一样。首先，我展示了 10 个条目。如果用户到达 show_crew.php 的底部，一个新的“show_crew.php”会附加到旧的，显示接下来的 10 个条目。

我在 show_crew.php 中嵌入了一些 Jquery 函数，在其中我通过绑定事件 

$('body').on('click', 'myButton[rel=<? echo $user['id'] ?>]', function() {
    console.log('foo');
})​

现在，由于 show_crew.php 被多次附加，事件也被多次绑定到同一个按钮。我可以通过$('body').off('click', 'myButton')每次解决这个问题。

这看起来很难看。有没有更优雅的方式？

谢谢，马特

4

1 回答 1

20

您只需要绑定一次委托事件。不要在每次加载内容时重新绑定。

使用 的格式$('body').on('click', '...selector...', function () {...})会将事件处理程序委托给<body>元素。这意味着主体将捕获所有click事件并检查它们是否发生在匹配的元素上...selector...。如果是这样，它将触发事件处理程序，就好像它是在匹配的元素上触发一样。

添加委托侦听器后，无需担心重新绑定，因为 的子级<body>可以更改，并且委托将持续存在新元素。这是一件非常好的事情™。

于 2012-09-19T14:06:23.243 回答