jQuery elements created using .append(html) not available

Question

I have the following

<script>
    $(document).ready(function() {
        $(".mapLink").click(function(){
            pos = $(this).attr("id");
            alert(pos);
        });
    });
</script>

<a class="map" id="test">Test</a>

When I click on Test I get an alert...great. But I also have the following...

<script>
    $(document).ready(function() {
        $(".mapLink").click(function(){
            pos = $(this).attr("id");
            alert(pos);
        });
    });
    $(#emp").change(function(){
        $("#existingAttendTime").html('');
        $.ajax({
            url: "existingAttendTime.php?emp=" + SelValue + "&time=0",
            cache: false,
            success: function(html){
                $("#existingAttendTime").append(html);
            }
        });
    });
</script>

<a class="mapLink" id="test">Test</a>
<div id="existingAttendTime"></div>

When the emp changes it fires off and gets the results from existingAttendTime.php and inserts it into the div, so now it looks something like...

<a class="mapLink" id="test">Test</a>
<div id="existingAttendTime"><a class="mapLink" id="12345">Return Test</a></div>

Clicking on Test gets me the alert "test", but clicking on Return Test gets me nothing.

What am I doing wrong or what am I missing?

Answer 1

Event handlers are attached on DOM ready once, if you manipulate the DOM you will need to either

• A) manually reattach event handlers
• B) rely on jQuery.prototype.live

It's probably more suitable to use B, so I suggest changing your click code to something like..

$("a.mapLink").live("click", function(){
    var pos = $(this).attr("id");
    alert(pos);
});

This will target any anchors that have been added through DOM manipulation.

Reference: http://docs.jquery.com/Events/live

And FYI you should be using var to declare pos in the current scope.

Answer 2

You need to bind your click handler in 'live' mode, or else newly-added DOM nodes won't trigger it:

$(document).ready(function() {
    $(".mapLink").live("click", function(){
        pos = $(this).attr("id");
        alert(pos);
    });
});

There used to be a plugin required for live queries, but jQuery 1.3 integrated a limited version of it into core. Also note that only some event types work; change, submit, etc. will not, so you would have to explicitly attach the handler inside the same function that appended the new node to the DOM.

Answer 3

When adding items dynamically, the click handler will not be registered on the new items. Instead, use .live():

$(document).ready(function() {
    $(".mapLink").live('click', function(){
        pos = $(this).attr("id");
        alert(pos);
    });
});