How do I attach events to dynamic HTML elements with jQuery?

Viewed 576102

Suppose I have some jQuery code that attaches an event handler to all elements with class .myclass.

For example:

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

And my HTML might be as follows:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

That works with no problem. However, consider if the .myclass elements were written to the page at some future time.

For example:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

In this case, the test4 link is created when a user clicks on a#anchor1.

The test4 link does not have the click() handler associated with it, even though it has class="myclass".

Basically, I would like to write the click() handler once and have it apply to both content present at page load, and content brought in later via AJAX / DHTML. Any idea how I can fix this?

8 Answers
Related