javascript 中的点击事件未触发

Question

我正在使用 JQuery sortable 并且有两个列表，我正在将项目从一个列表移到另一个列表。第一步只需双击即可。现在它在第二个列表中，我想允许用户通过单击并按下删除键来删除项目。我的计划是触发一个点击事件并用 class 装饰列表项，然后当删除键被按下时，它将删除所有带有 class 的项目。在这一点上，我在获取点击事件时遇到了问题。由于我正在动态创建列表项，因此我使用了 on event 关键字。我的第二个列表 html 如下所示。

<div id="CartContents" class="ui-widget-content">
     <ul id="sortableArea" class="cartSortable">
     </ul>
</div>

我尝试处理点击事件的 js 如下所示。

$('.cartSortable li').on("click", function () {
    alert('here');
    $(this).toggleClass("selected");
});

警报就在那里，这样我就知道它是否被击中了。让我知道您认为错误的地方或我的理解不足的地方。

Answer 1

由于您是动态创建列表项，因此您需要 delegate the event:

$('.cartSortable').on('click', 'li', function () {

或者，如果您的脚本在 <body> 之前执行：

$(document).on('click', '.cartSortable li', function () {

Answer 2

您可以使用 jQuery 的 live 方法将事件处理程序绑定到与当前查询选择器匹配的所有元素。 http://api.jquery.com/live/

$('.cartSortable li').live("click", function () {
    alert('here');
    $(this).toggleClass("selected");
});

javascript 中的点击事件未触发

on click event in javascript not triggering

javascript

jquery

javascript-events