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.