JQuery elements created using .append(html) not available

jquery

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?

Best Answer

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.