How to edit link that show modal box in jQuery

Question

I have a problem where I try to show a modal box, it's when I append some a href="" links to my that is on my index page.

I have this in my jQuery script:

$(document).ready(function(){

  $('a').click(function () { 
    // Dialog   
    $("#feed"+$(this).attr('id')).dialog({
      bgiframe: true,
      width: 400,
      modal: true
    });
  return false;
  });
});

And this is the link I have on the index page:

<p><a href="#" id="0">Feed 0</a></p>

If I add the links on the index page it works, but if I empty my div and post new links without any reload they stop to work. No modal box shows, how can I make the jQuery get that the links are there even if they apere after the document is loaded?

I need a jQuery function that allows me to add links after the document has been loaded.

Thanks in Advance Daniel

Answer 1

Use .live() to attach a handler to document that'll work on current and future links, like this:

$(function(){
  $('a').live('click', function () { 
    $("#feed"+this.id).dialog({
      bgiframe: true,
      width: 400,
      modal: true
    });
    return false;
  });
});

As an aside, your id 's aren't valid in HTML4 (they can't start with a number, not that they'll realistically cause any issues here, just pointing it out). They are valid in HTML5 however :)