jQuery: dom insertion selector problem after .get

Question

HI Volks,

here is my code block which I want to replace by the ajax respond:

<div class="results">
  <span id="like9">
    <a class="like" rel="ajax.php?id=9" href="#">klick</a>
  </span>
</div>

this is how I observe the ajax link:

$(document).ready(function()
{
  $('.results .like').click(function()
  {
     params = getUrlVars($(this).attr('rel'));
     $.get($(this).attr('rel'), function(data)
     {
       $('#like'+params['id']).html(data); 
     });

     return false;
  });
});

After I click on the link, everythings works fine, and the code block will be replace how expected. Everthing is equal except the link name.

But when I click a second time on the link, the selector does not work any more. I think because the old a.like was replaced.

My question is, how can I tell jquery or the DOM that there is a new DOM node?

I'm hoping for help. THX a lot.

Answer 1

you could try to use jQuery.live()

$(selector).live("click", function() {});

Answer 2

Instead of using $('.clickme').click() which is a one-time bind(), try $('.clickme').live('click', function() { ... }); which essentially monitors for changes and maintains the bind across DOM changes.

See here for more.