javascript - 无法与通过jquery追加添加的dom对象交互

Question

我已经使用append将tr和td标签添加到表中，但我jQuery似乎不知道dom对象在那里(我认为这就是append/prepend所做的？)。当我运行脚本时，表行被添加，用户可以看到它，但 jQuery 没有捕获超链接或其他任何内容上的单击处理程序。我在不同的页面上做了同样的事情，效果很好。我也把它包括在内了。如果有人能告诉我我的思路在哪里脱轨，我将不胜感激。另外，如果我的处理方式错误，请告诉我，以便我改进。

损坏的代码:

    $("#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>

在不同页面上运行的类似代码是:

    $(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>

Answer 1

您正在页面上出现任何 .removeAdmin 元素之前定义事件处理程序 ($('.removeAdmin').click())。

您需要做的就是委托(delegate)您的事件。假设您使用的是最新的 jQuery:

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

这样，事件处理程序就会附加到一个存在的元素，即 chosenAdmins 表。

注意不建议使用.live，因为这会将事件附加到文档，而其他代码可能会无意中删除这些事件。如果您使用的是 jQuery < 1.7，请使用 delegate:

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