Question

I have a list item which contains an anchor tag. This does X on click which is fine. However when i add in a new list item on the fly via jquery and then click the anchor tag within this new list item the click is not registered. Code snippets below.

On click:

$('ul#foo li p a#delete').click(function(){ 

alert('hmm');
});

Adding new element after an ajax call:

onComplete: function(id, fileName, data){
            $('ul#foo').prepend(data.li);
        }

Now i think its to do with the fact that the DOM isnt aware of the new element?

So after some googling i realized everyone is saying use the .live() on ‘change’

So i tried .live():

$('ul#foo').live('change', function() {
    //something
});

Thats where im stuck. ive never used .live() before. Am i missing something, am i doing it wrong? Any help would be appreciated.

What id like is for the click to be registered on my new on-the-fly element.

thanks for reading

Answer 1

The confusion you’re having is with selectors actually. Once you select the right thing through jQuery, the rest follows more easily. Ok, so your html should look more like this:

<ul>
    <li><a class="someUniqueClassToTheseLinks" href="whatever"></a></li>
</ul>

so that when you add an li through jQuery, it would look like this:

<ul>
    <li><a class="someUniqueClassToTheseLinks" href="whatever"></a></li>
    <li><a class="someUniqueClassToTheseLinks" href="whateverElse"></a></li>
</ul>

Now your live event registration is just:

$('a.someUniqueClassToTheseLinks').live('click', function(event) {
    ...
});