Question

How can I target dynamically loaded content with jQuery? I’ve read about it a lot an found the .live() function is an easy way to add an event to loaded content, but I’m not sure how to target objects within the loaded content. I’ve got a container on the main page:

<div id="container">place to load content</div>

and a container on the loaded page:

<div id="ajax-container">
    <div id="stuff">
        <div class="random-class">stuff to be loaded</div>
        <div class="random-links"><a href="#" class="delete">delete me</a></div>
    </div>
</div>

I have a link with the class ‘delete’ that I wanted to use to delete #stuff. I found out that jQuery will ignore the newer content, and therefore I could not attach an event to that anchor. I discovered the .live() function and that fixed my click problem.

$('.delete').live('click', function() {
    alert('click event works');
    $(this).parent('#stuff').hide();
});

The alert will fire, but how can I target div#stuff as well?

Answer 1

$('.delete').live('click', function() {
    alert('click event works');
    $(this).closest('div#stuff').hide();
});

here is the fiddle http://jsfiddle.net/5tCZH/