为什么在.html（）之后没有触发click事件？ （jQuery的）

Question

Please, consider this code:

<script>
$(function(){
   $('#clickme').click(function(){   
      $('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');
   }); 

   $('#note_pag a').click(function(){           
     alert($(this).attr('href'));                  
    return false;
   });
});
</script>


<a href="#" id="clickme">CLICK ME</a>

<div id="note_pag">
  <ul>
    <li><a href="1">1</a></li>
    <li><a href="2">2</a></li>
    <li><a href="3">3</a></li>
    <li><a href="4">4</a></li>
  </ul>
</div>

Could someone tell me why I can get the clicks on the links inside #node_app , but when I replace the div with .html() the event is not fired anymore?

Answer 1

Because your essentially using .bind (via .click ) the events are only set for the current elements. You're then removing those elements. If you want those events to persist after you've altered the dom, use .live instead:

$("#note_page a").live("click", function() {
    alert($(this).attr("href"));
    return false;
});

Answer 2

You need live -

$('#note_pag a').live('click',function(){           
    alert($(this).attr('href'));                  
    return false;
});

also, you should avoid creating a duplicate id when inserting the new content. You could chnage note_page to a class instead of an id.

Answer 3

Binding to events via click() or bind() only works for objects that are already present in the DOM at the time of binding your event handler.

What you are looking for is jQuery's live() function, which allows you to bind handlers to not-yet-existing elements.

Your code would look like this:

$('#note_pag a').live('click', function(){
    alert($(this).attr('href'));                  
    return false;
});

Edit: To be precise, live() binds to $(document) and checks the target attribute of events that have bubbled all the way up through the DOM – that's why the binding works even though elements are added after binding the event callback.

Example HTML:

<div id="some_triggers">
    <a id="foo" href="#">Foo!</a>
</div>

Example jQuery:

$('#foo').click(function(){ alert('foo') });
$('#bar').click(function(){ alert('bar') });
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>');
$('#foo').live('click', function(){ alert('foo live()!') });
$('#bar').live('click', function(){ alert('bar live()!') });

// -> clicking #foo alerts "foo" and "foo live()"
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.

Edit2:

As mentioned by some of the others (@Marnix, most notably), your "replacement" code is nesting elements with the same ID inside each other every time the click handler executes.

You should replace your

 $('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

line with either

$('#note_pag').replaceWith('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

or

 $('#note_pag').html('<ul><li><b>1</b></li><li><a href="2">2</a></li></ul>');

Answer 4

$('#note_pag a')

This says "find all a elements within #note_pag ". You then bind an event handler to those elements.

$('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

When you do this, the elements that the event handlers were bound to above are replaced. (Actually, you're also adding <div id="note_pag"> every time: you don't need to include the html of the element you're filling.)

Effectively, you need to bind the event handler to a different element, one that always exists. This is possible because ancestor elements are notified of events on descendant elements. The nicest way to do this with jQuery is the delegate method:

$('#note_pag').delegate('a', 'click', function() {
    alert($(this).attr('href'));                  
    return false;
});

Note that this does the same thing as live , but is significantly better optimised in various ways.

Answer 5

event isn't set to the new html after the click

try:

$('#note_pag a').live('click', function(){  

Answer 6

尝试使用.live()

Answer 7

Instead of $('#note_pag a').click you would need to use $('#note_pag a').live("click",handler) . Reason : The event was attached to the a node and when you overrite the HTML it becomes a new a node