从HTML中删除用作选择器的类或ID后，为什么仍要调用jQuery函数？

Question

http://jsfiddle.net/q98G6/

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');
)};

The example above is for a multiple choice question in a quiz - the user should only be able to click the answer once, and then it should be 'unlinked' from that jQuery function.

But the problem is even after the class has been removed successfully, the jQuery function is still called when clicked. Why?

Here is a fiddle I made of a demo, if the code above was not clear: http://jsfiddle.net/q98G6/

Answer 1

The selector is only used to find the elements, once the element is found and the event handler is attached to it, the selector does not have any relevance because the handlers are attached to the element not to the selector.

One way to solve the problem is to make use event delegation . In event delegation the handlers are attached to an ancestor element and we pass a selector as a target element. In this method the target selector is evaluated lazily.

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

Answer 2

The selector returns all the elements that match it at the time you bind the handler, and then it attaches the handler to all those elements. Changing an element's class later does not remove the event handlers that were already bound.

If you want your handler to be bound to dynamically changing elements, you should use delegation:

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

Answer 3

Try this

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

FIDDLE DEMO