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