Question

HTML

<p>[QUESTION]</p>
<div class="answer-notdone">
    <p>[CONTENT_1]</p>
</div

<div class="answer-notdone">
    <p>[CONTENT_2]</p>
</div

<div class="answer-notdone">
    <p>[CONTENT_3]</p>
</div

的JavaScript

$(".answer-notdone").click(function(){
    markQuestion(this); //external function 
    $(".answer-notdone").addClass('answer-complete').removeClass('answer-notdone');
)};

上面的示例是针对测验中的多项选择问题 - 用户应该只能单击一次答案，然后应该与该jQuery函数“取消链接”。

但问题是即使在成功删除类之后，单击时仍会调用jQuery函数。为什么？

如果上面的代码不清楚，这是我演示的小提琴：http://jsfiddle.net/q98G6/

Answer 1

选择器仅用于查找元素，一旦找到元素并且事件处理程序附加到它，选择器就没有任何相关性，因为处理程序附加到元素而不是选择器。

解决问题的一种方法是使用event delegation。在事件委托中，处理程序附加到祖先元素，我们将选择器作为目标元素传递。在这种方法中，目标选择器被懒惰地评估。

$(document).on('click', ".answer-notdone", function(){
    markQuestion(this); //external function 
    $(".answer-notdone").addClass('answer-complete').removeClass('answer-notdone');
)};

Answer 2

选择器返回绑定处理程序时匹配它的所有元素，然后将处理程序附加到所有这些元素。稍后更改元素的类不会删除已绑定的事件处理程序。

如果您希望将处理程序绑定到动态更改元素，则应使用委托：

$(document).on('click', '.answer-notdone', function() {
    ...
});

Answer 3

试试这个

$(document).on('click',".answer-notdone",function () {
     //markQuestion(this);
     $(".answer-notdone").addClass('answer-complete').removeClass('answer-notdone');
});

FIDDLE DEMO

为什么在从HTML中删除用作选择器的类或id后仍然调用jQuery函数？

3 个答案: