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?

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?

• javascript
• jquery

Share Improve this question Follow edited Oct 19, 2011 at 9:55 vzwick 11.1k55 gold badges4646 silver badges6363 bronze badges asked Oct 19, 2011 at 9:48 DailDail 4,6081616 gold badges7777 silver badges113113 bronze badges 2

• 1 Wouldn't $('#someid').html('<div id="someid"></div>') give you two objects with the same id nested in each other? – Marnix Commented Oct 19, 2011 at 9:53
• Just a note that .live() as mentioned in many of the answers below is now deprecated. Using .delegate() as lonesomeday mentioned below works nicely. – brybott Commented Sep 24, 2015 at 20:10

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 9

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

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.

$('#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.

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

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

try:

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

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 bees a new a node

Try to use the .live()