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

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

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

此外，管理员可以从参与者列表中删除用户。这种情况发生在 div .event_list_cancel 上 - 当管理员单击该用户时，该用户将从参与者列表中删除，并再次添加到等待列表中。奇怪的是，当我最初进入页面时，我只能将用户添加到列表中/从列表中删除用户。当我例如将用户从等待状态移至参与者列表，然后通过单击参与者列表中的“delete-div”将其更改回来，没有任何反应。如果我刷新网站并且所有内容都将从数据库中生成 - 那么它就可以工作。我希望 JQuery on() 方法能够解决这个问题，因为添加/删除后的元素将在 DOM 加载之前存在，但什么也没有发生......我该如何解决这个问题？

我希望它的解释不会令人困惑。

谢谢！！！

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

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

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

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

但是，如果您像这样使用它：

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

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

这种用法on正在替换旧功能live and delegate。如果您需要更好地理解，阅读有关它们的文档也可能很有用。