JQuery - on（） - 方法/动态处理程序

我有一个等候名单和一个参与者列表。管理员可以通过点击除了等待列表上的用户名之外的div来将用户添加到参与者列表中。JQuery - on（） - 方法/动态处理程序

点击div将某人添加到参与者列表中后，将调用ajax请求 - >此请求更新数据库中用户的状态，以及 - 如果ajax请求成功 - 将用户添加到参与者列表而不重新加载页面。所以它看起来像列表将从数据库刷新，但用户通过JQuery添加到列表中，数据库操作在后面完成。

此外，管理员可以从参与者列表中删除用户。这发生在div .event_list_cancel - 当管理员点击时，用户将被从参与者列表中删除，并将再次添加到等待列表中。奇怪的是，当我最初进入页面时，我只能将用户添加/删除列表/从列表中删除。当我例如将用户从等待中移动到参与者列表，然后通过单击参与者列表中的“删除div”将其改回，没有任何反应。如果我刷新网站，所有将从数据库中新鲜生成 - 那么它的工作原理。我希望JQuery on（）方法能够解决这个问题，因为添加/删除之后的元素会在DOM加载之前出现，但是没有任何反应......我怎么解决这个问题？

我希望这不是混淆解释。

谢谢！

来源

2012-02-27 Torben

您应该查看文档并阅读关于Direct and delegated events的部分。

基本上，如果你使用on这样的：

$(".some_button").on("click",function(){});

那么这个事件将被直接绑定到每一个你的选择相匹配的元素。如果将新元素添加到与选择器匹配的DOM中，则不会添加它们。

但是，如果你使用这样的：

$("#my_wrapper").on("click",".some_button",function(){});

那么事件将实际连接到#my_wrapper，并发射时，目标将进行检查，看它是否您的选择相匹配。这意味着添加到#my_wrapper的任何元素仍会受到影响，即使它们是在事件绑定后添加的。

on的这种用法正在取代live和delegate的旧功能。如果您需要更好的理解，也可以阅读关于它们的文档。

来源

2012-02-27 20:27:13

有时候我傻 - 我用来解决这个自己的方式但在昨天晚上之前，我没有记住它......现在它可以正常工作 - 但是您按照错误的顺序编写了on方法 - 必须首先写入'click'，然后在第二个要触发的类中对于。谢谢！ – Torben 2012-02-28 19:19:49

好点，我确实倒退了。对于任何未来绊倒它的人，我都会更新我的回答。 – 2012-02-28 21:07:31

您可能会遇到缓存问题。试着设置你的onclick方法，在你想要改变的页面部分调用jquery的.hide（）和.show（）作为其最后两行代码。

来源

2012-02-27 20:26:36

难以确定没有小提琴或HTML，但我认为可能发生在您身上的是您正在使用on（）并将操作绑定到所有具有.event_list_cancel类的元素，但是如果您创建一个具有相同类的新元素，它不包含在$（'。event_list_cancel'）对象中，直到您重新初始化on（）方法。（'。event_list_cancel'）。on（'click'，function（e）{...之后你的div已经四处移动了。）你试过重新绑定选择器$（'。event_list_cancel'）。

不能完全确定如何重新绑定事件之后才能影响记忆，所以你可能要关闭（）绑定再次....

来源

2012-02-27 20:29:40

你知道我认为詹姆斯的解决方案比我的更准确 – 2012-02-27 20:31:09

JQuery - on（） - 方法/动态处理程序

回答

相关问题