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?

I think you have an error in Test. You seem to be referencing .mapLink and you have it listed in the html as .map for the css class. — James Black
– James Black, Commented Sep 29, 2009 at 0:25

rcoder · Accepted Answer · 2009-09-29 00:24:09Z

4

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.

answered Sep 29, 2009 at 0:24

rcoder

12.9k2 gold badges25 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

meder omuraliev · Accepted Answer · 2009-09-29 00:30:34Z

3

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.

edited Sep 29, 2009 at 0:30

answered Sep 29, 2009 at 0:23

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Comments

Tomas Aschan · Accepted Answer · 2009-09-29 00:24:40Z

2

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);
    });
});

answered Sep 29, 2009 at 0:24

Tomas Aschan

61.2k62 gold badges267 silver badges424 bronze badges

Collectives™ on Stack Overflow

jQuery elements created using .append(html) not available

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related