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>

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>

• javascript
• jquery

Share Improve this question Follow asked Jul 3, 2012 at 17:10 genericHCUgenericHCU 4,44622 gold badges2525 silver badges3434 bronze badges 3

• 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 Commented Jul 3, 2012 at 17:46
• Nothing. :) that was all of the pertinent code. – genericHCU Commented Jul 3, 2012 at 18:51
• alert(this.attr(id)); was also a disaster... should have been alert($(this).attr("id")); – genericHCU Commented Jul 3, 2012 at 19:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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 remended 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));
});

.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!

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./live/

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>')

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

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