JQuery – on() – 方法/动态处理程序

我有一份等候名单和一份参加者名单。 管理员可以通过单击等待列表上的用户名之外的div来将用户添加到参与者列表。

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

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

我希望不要混淆解释。

谢谢!!!

您应该查看文档并阅读有关直接和委派事件的部分。

基本上,如果你像这样使用:

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

然后,此事件将直接绑定到与您的选择器匹配的每个元素。 如果将新元素添加到与选择器匹配的DOM中,则不会添加它们。

但是,如果你这样使用它:

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

然后事件将实际附加到#my_wrapper ,并且在触发时,将检查目标以查看它是否与您的选择器匹配。 这意味着添加到#my_wrapper任何元素仍然会受到影响,即使它们是在绑定事件后添加的。

这种用法取代了livedelegate的旧function。 如果您需要更好的理解,也可以阅读有关它们的文档。

您可能遇到了缓存问题。 尝试将onclick方法设置为在您想要更改为最后两行代码的页面部分上调用jquery的.hide()和.show()。

很难确定没有小提琴或一些HTML,但我认为可能发生在你身上的是你正在使用on()并使用.event_list_cancel类将所有元素绑定到一个动作,但是如果你创建一个新元素在重新初始化on()方法之前,它与$(’。event_list_cancel’)对象不包含在同一个类中。

你有没有尝试重新绑定选择器$(’。event_list_cancel’)。on(’click’,function(e){…在你的div之后移动了。

不完全确定重新绑定事件将如何影响内存,所以你可能想要在再次绑定之前关闭()它….