无法与添加了jquery追加的dom对象进行交互 [英] Cannot interact with dom objects added with jquery append

问题描述

我使用append将tr和td标签添加到表中，但是jQuery似乎并不知道dom对象是否存在（我认为这是append / prepend的作用？）。当我运行脚本时，表行被添加，用户可以看到它，但jQuery没有捕获超链接或其他任何东西上的点击处理程序。我在另一个效果很好的页面上做了同样的事情。我也把它包括在内。如果有人能告诉我我的思路出轨的地方，我会非常感激。此外，如果我以错误的方式解决这个问题，请告诉我，以便我可以改进。

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.

损坏代码：

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

推荐答案

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

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

您需要做的是委派您的活动。假设您正在使用最新的jQuery：

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

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

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

注意建议不要使用 .live ，因为这会将事件附加到文档，而其他代码可能会无意中删除这些事件。如果您正在使用jQuery< 1.7，使用委托：

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

这篇关于无法与添加了jquery追加的dom对象进行交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！