无法与使用 jquery 追加添加的 dom 对象进行交互

Cannot interact with dom objects added with jquery append

本文关键字：dom 对象 交互 添加 追加 jquery      更新时间：2023-09-26

我已经使用 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>

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

您需要做的是委派您的活动。假设您使用的是最新的 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));
});
添加

单击处理程序时.removeAdmin尚不存在。试试这个：

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

另外，请注意在行中使用id="ra"。由于#addAdmin可能会被多次点击，因此您最终可能会得到具有相同ID的多个元素，这将使您的垃圾吓坏了！

对于动态创建的元素，您需要 live 函数：

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

适用于，单击，悬停和所有类型的功能。

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

您在.append中有一个拼写错误（忘记添加正斜杠），修复损坏的HTML，它应该可以工作：

从：

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

自：

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

建议在附加 dom、live 和 delegate 时使用$(document)选择器。例如：

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