Cannot interact with dom objects added with jquery append

Question

I've added tr and td tags to a table using append but I jQuery doesn't seem to know the dom objects are there (I thought that's what append/prepend did?). When I run the script the table row is added and the user can see it but jQuery isn't catching the click handler on the hyperlink or anything else. I've done the same thing on a different page that works great. I've included that as well. If someone could please tell me where my train of thought got derailed, I'd be much obliged. Also if I'm going about this the wrong way please let me know so I can improve.

broken code:

    $("#addAdmin").click(function(){
                $("#chosenAdmins").append('<tr id = "admin' + $("#admins").val() + '"><td align="left">' + $("#admins option:selected").text() + ' </td><td align="right"><a href="#" class = "removeAdmin" id = "ra" style = "font-size: 10px;">Remove</a></td><tr>');
    });
    $(".removeAdmin").click(function(e){
        e.preventDefault();
        alert('clicked');
        alert(this.attr(id));
    });
    <select id = "admins">
        <option value = "1">bob smith</option>
    </select> 
    <input type = "button" id = "addAdmin"/>
    <table id = "chosenAdmins" align="center" width="0%"> </table>

The similar code that works on a different page is:

    $(document).ready(function() {
        var leftData = '<div id = "l1">left Stuff</div>';
        var leftData = leftData + '<div id = "l2">left Stuff</div>';
        var rightData = '<div id = "r1">right Stuff</div>';
        var rightData = rightData + '<div id = "r2">right Stuff</div>';
        $("#selector").prepend("<div id = 'leftSelect' style = 'float:left'>"+leftData+"</div><div id = 'rightSelect' style = 'float:left'>"+rightData+"</div>");
        $("#l1").click(function(){
            $(this).hide("fast", function(){
                $(this).prependTo('#rightSelect');
                $(this).show("fast");
            });
        });
     });

<div id = "selector"> </div>

please provide a proper snippet of broken code, did you forget to include <script></script> tags? if so, what else did you "forget" to exclude? — Alex
– Alex, Commented Jul 3, 2012 at 17:46
alert(this.attr(id)); was also a disaster... should have been alert($(this).attr("id")); — genericHCU
– genericHCU, Commented Jul 3, 2012 at 19:20

jackwanders · Accepted Answer · 2012-07-03 17:14:32Z

3

You are defining your event handler ($('.removeAdmin').click()) before there are any .removeAdmin elements on the page.

What you need to do is delegate your events. Assuming you're using the latest jQuery:

$("#chosenAdmins").on('click','.removeAdmin',function(e){
    e.preventDefault();
    alert('clicked');
    alert(this.attr(id));
});

This way, the event handler is attached to an element that exists, namely, the chosenAdmins table.

NOTE It is not recommended to use .live, as this attaches events to the document, and other code may inadvertantly remove these events. If you are using jQuery < 1.7, use delegate:

$("#chosenAdmins").delegate('.removeAdmin','click',function(e){
    e.preventDefault();
    alert('clicked');
    alert(this.attr(id));
});

answered Jul 3, 2012 at 17:14

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

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

2 Comments

genericHCU Over a year ago

Thanks for the quick response. Is there an advantage to using on over delegate? I'm using 1.7.2.

jackwanders Over a year ago

on is just the single function call that has taken over for bind,delegate,and live (itself a version of delegate). I don't think there is any practical difference for normal event delegation, but on is the newer syntax. on also has the easy-to-remember off function for removing event handlers.

Grinn · Accepted Answer · 2012-07-03 17:15:52Z

2

.removeAdmin doesn't exist yet when the click handler is added. Try this:

$("#addAdmin").click(function(){
        var tr = $("#chosenAdmins").append('<tr id = "admin' + $("#admins").val() + '"><td align="left">' + $("#admins option:selected").text() + ' </td><td align="right"><a href="#" class = "removeAdmin" id = "ra" style = "font-size: 10px;">Remove</a></td><tr>');
        $(".removeAdmin", tr).click(function(e){
            e.preventDefault();
            alert('clicked');
            alert(this.attr(id));
        });

    });
    <select id = "admins">
        <option value = "1">bob smith</option>
    </select> 
    <input type = "button" id = "addAdmin"/>
    <table id = "chosenAdmins" align="center" width="0%"> </table>

Also, be careful of using id="ra" in your row. Since #addAdmin could potentially be clicked more than once, you could end up with multiple elements with the same ID which will make your junk FREAK OUT!

answered Jul 3, 2012 at 17:15

Grinn

5,56340 silver badges52 bronze badges

3 Comments

genericHCU Over a year ago

Thanks! Id="ra" is temporary because it was broke. I'll add the id number it the ra

genericHCU Over a year ago

This hurts my head. I like this solution though. what does jquery do with the second parameter passed (tr)? I've only ever used the basic element / style / id value.

Grinn Over a year ago

It gives the context. Effectively, that line only matches elements with the .removeAdmin class within tr, inclusively.

Deep Frozen · Accepted Answer · 2012-07-03 17:12:29Z

1

For dynamically created elements, you need the live function:

$("#elem").live("click", function() {
    // Code here
});

Works with, click, hover and all types of functions.

http://api.jquery.com/live/

answered Jul 3, 2012 at 17:12

Deep Frozen

2,0752 gold badges26 silver badges43 bronze badges

2 Comments

Deep Frozen Over a year ago

@Xander good point.. Still using an older jQuery. About time i'd change my scripts then

genericHCU Over a year ago

I've used delegate before and in doing so I read that live was deprecated. I'm surprised how many people still use it.

Alex · Accepted Answer · 2012-07-03 17:13:31Z

1

You've got a typo in the .append (forgot to add forward slash), fix the broken HTML and it should work:

From:

...Remove</a></td><tr>')

To:

...Remove</a></td></tr>')

answered Jul 3, 2012 at 17:13

Alex

35.5k5 gold badges81 silver badges94 bronze badges

4 Comments

Grinn Over a year ago

He's right. It's not the cause of the issue you mention above, but it is an issue.

Alex Over a year ago

@Grinn how do you know it doesn't exist when the code he's provided is just a snippet. you're assuming the code is not wrapped inside an event. he has no <script> tag around the code so it is most probably a snippet of something larger.

Grinn Over a year ago

Sorry if I was unclear. I was only saying that his code doesn't work for other reasons, not that he doesn't need to properly close his TR tags.

genericHCU Over a year ago

Thanks for the catch Xander, Grinn is right though it wasn't the cause of the handler problems

Ashwani Panwar · Accepted Answer · 2015-05-27 11:39:45Z

0

Use $(document)selector while appending dom, live and delegate not recommended. For example :

$(document).on('click','.removeAdmin',function(e){
    e.preventDefault();
     alert('clicked');
    alert(this.attr(id));
});

answered May 27, 2015 at 11:39

Ashwani Panwar

4,6763 gold badges53 silver badges78 bronze badges

Collectives™ on Stack Overflow

Cannot interact with dom objects added with jquery append

5 Answers 5

2 Comments

3 Comments

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related