jquery append() not working on dynamically added elements

Question

Consider the HTML

<ul>
    <li>Default item</li>
    <li>Default item</li>
</ul>
<button>Append</button>

and the jQuery code

$('button').live('click', function(){  //This action is done by an external script.
    $('ul').append('<li>Added item</li>'); 
});

$('ul li').append('<b> x</b>'); // This action is done by me

The thing is, I need to append the "x" mark to all newly added elements to the dom.

In this case only default elements are appended with the "x" mark.

Newly added elements are not appended by "x".

I am sure the work will be simple, but cant get it right !!

Live example - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

Your code is running right away, and so of course it only has access to the elements that already exist. The code adding new list items is running later, when the user clicks something. You'll have to hook into that process as well.

One way is to hook the same event they are, and run your code from the event handler. Be sure to hook the event after they do.

Their code:

$('button').live('click', function(){
    $('ul').append('<li>Added item</li>');
});

Your code (after theirs):

$('button').live('click', markButtons);

markButtons();

function markButtons() {
    $('ul li:not(.marked)')
        .addClass("marked")
        .append('<b> x</b>');
}

Updated fiddle

The reason I said your code needs to do its hookup after their code is that jQuery guarantees the order of the calls to event handlers: When the event occurs, the handlers are called in the order in which they were attached. By attaching your handler after they attach theirs, you guarantee that your handler is called after theirs has done its thing.

If you're worried about the order getting mixed up, you could always delay your code slightly:

$('button').live('click', function() {
    setTimeout(markButtons, 0);
});

That way, your code is guaranteed to run after all of the event handlers hooked to the click have been run.

Answer 2

You have to repeat the "x" code in the event handler:

$('button').live('click', function(){  //This action is done by an external script.
    $('ul').append(
      $('<li>Added item</li>').append('<b>x</b>')
    ); 
});

Of course you could also just put the bolded "x" right in the <li> when you append it ...

edit If you can't change the click handler, then the only thing you can do is either poll the DOM, or else try something like what @T.J. Crowder suggests (which I think should work just fine).

Answer 3

Why not just do it in the initial append?

$('button').live('click', function(){  //This action is done by an external script.
    $('ul').append('<li>Added item<b> x</b></li>'); 
});

---

Since it sounds like you don't have access to the script that is doing the append, you could bind your own handler.

$('button').live('click', function(){  //This action is done by an external script.
    setTimeout(function() {
        $('ul li:not(li:has(b))').append('<b> x</b>'); 
    }, 10);
});

This will select li elements that do not currently have a nested b element, and it will append one.

I placed it in a setTimeout since you may not be able to guarantee the order of execution of the handlers.

If you prefer valid CSS selectors, do this instead:

$('ul li').not($('li b').closest('li')).append('<b> x</b>'); 

or this:

$('ul li').not(function() { return $(this).find('b').length; }).append('<b> x</b>'); 

---

JSFIDDLE DEMO showing the two separate handlers.