Question

我正在处理的网页是candidate-tile的列表，看起来像这样（这实际上是mustache模板：

<div class="candidate-tile">
    <div class="candidate-image">
        <img src="<%= candidate.image %>" width="50px" height=auto />
    </div>
    <div class="details">
        <h3 class="candidate-name"><%= candidate.name %></h3>
        <h6 class="candidate-dept"><%= candidate.dept %></h6>
        <span class="label label-info"><%= candidate.hostel %></span>
    </div>
    <div class="checkbox">
        <span class="check">&#10003;</span>
    </div>
</div>

我想在点击复选框时切换课程。像这样：

$('.checkbox').click(function(){
    $(this).parent().toggleClass("candidate_selected");
});

但这似乎不起作用。如何捕获checkbox并确保可以处理点击事件？

更新

我刚刚测试了mustache模板中的点击事件存在问题。我正在使用sammy.js加载模板。在页面的其余部分（已修复且未使用mustache / sammy呈现）单击事件正常工作。但由于某种原因，点击事件不适用于胡子/萨米所呈现的部分。有谁知道发生了什么事？我有什么办法可以更好地解释这种情况吗？ sammy是在监听事件而不是让jquery处理它吗？

另一个更新

据我所知，问题是当加载包含candidate-tile处理程序的js文件时，click未加载。项目稍后加载，但到那时，我猜，所有事件注册都已经发生，因此没有绑定到生成的新DOM元素的事件。我这么认为是对的吗？如果是的话，出路是什么？

非常感谢！

Answer 1

您的代码应该可以正常运行。它将使用类candidate_selected切换div上的课程candidate-tile。尝试将console.log放入闭包中以查看点击是否正在触发。

如果使用AJAX动态创建切片，则可能需要使用：

$('#container').on('click', '.checkbox', function(){....

container将是div以上的candidate-tile divs级别。

捕获jquery单击事件冒泡

更新

另一个更新

1 个答案: