Javascript 无法与使用jquery append添加的dom对象交互_Javascript_Jquery

Javascript 无法与使用jquery append添加的dom对象交互

javascript jquery

Javascript 无法与使用jquery append添加的dom对象交互,javascript,jquery,Javascript,Jquery,我已经使用append向表中添加了tr和td标记，但是jQuery似乎不知道dom对象在那里（我想append/prepend就是这么做的？）。当我运行脚本时，表行被添加，用户可以看到它，但是jQuery没有捕捉到超链接上的点击处理程序或其他任何东西。我在另一个页面上做了同样的事情，效果很好。我也包括了这一点。如果有人能告诉我我的思路在哪里出轨，我将不胜感激。另外，如果我用了错误的方法，请让我知道，这样我可以改进破译代码： $("#addAdmin").click(function()

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

$（“#addAdmin”）。单击（函数（）{
$（“#chosenAdmins”）.append（“”+$（“#admins选项：选中”）.text（）+“”）；
});
$（“.removeAdmin”）。单击（函数（e）{
e、 预防默认值（）；
警报（“点击”）；
警报（this.attr（id））；
});
鲍勃·史密斯

在不同页面上工作的类似代码为：

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

$（文档）.ready（函数（）{
var leftData=‘left Stuff’；
var leftData=leftData+‘leftstuff’；
var rightData='正确的东西'；
var rightData=rightData+“正确的东西”；
$（“#选择器”）.prepend（“+leftData+”+rightData+”）；
$（“#l1”）。单击（函数（）{
$（this.hide（“fast”，function（））{
$（this）.prependTo（“#rightSelect”）；
$（此）.show（“快速”）；
});
});
});

对于动态创建的元素，您需要使用

live

功能：

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

使用、单击、悬停和所有类型的函数

您的

中有一个输入错误。append

（忘记添加正斜杠），修复损坏的

HTML

，它应该可以工作：

发件人：

…删除“）

致：

…删除“）

您正在定义事件处理程序（

$（'.removeAdmin'）。在页面上出现任何.removeAdmin
元素之前，请单击（）
你需要做的是委派你的活动。假设您使用的是最新的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>

$（“#addAdmin”）。单击（函数（）{
var tr=$（“#chosenAdmins”）.append（“”+$（“#admins选项：选中”）.text（）+“”）；
$（“.removeAdmin”，tr）。单击（函数（e）{
e、 预防默认值（）；
警报（“点击”）；
警报（this.attr（id））；
});
});
鲍勃·史密斯

另外，请注意在您的行中使用id=“ra”
。由于#addAdmin
可能会被多次单击，因此您可能会得到具有相同ID的多个元素，这会让您的垃圾程序崩溃
 在附加dom时使用$（文档）
选择器，live
和delegate
不推荐使用。例如：
$(document).on('click','.removeAdmin',function(e){
    e.preventDefault();
     alert('clicked');
    alert(this.attr(id));
});

@桑德说得很好。。仍然使用旧的jQuery。大约是时候我会改变我的脚本了，我以前使用过委托，在这样做的过程中，我读到live被弃用了。我很惊讶有这么多人还在用它，他是对的。这不是你上面提到的问题的原因，但它是一个问题。@Grinn当他提供的代码只是一个片段时，你怎么知道它不存在。您假设代码没有包装在事件中。他在代码周围没有
标记，因此很可能是更大的代码片段。如果我不清楚，请原谅。我只是说他的代码由于其他原因无法工作，并不是说他不需要正确关闭TR标记。感谢catch Xander，Grinn是对的，尽管这不是处理程序问题的原因Hanks！Id=“ra”是临时的，因为它已损坏。我会加上身份证号码，这会伤到我的头。不过我喜欢这个解决方案。jquery如何处理传递的第二个参数（tr）？我只使用过基本元素/style/id值，它给出了上下文。实际上，该行仅与tr中的.removeAdmin
类（包括）匹配元素。请提供一个正确的断开代码片段，是否忘记包含
标记？如果是这样，您还“忘记”排除了什么？什么都没有。：）这就是所有相关的code.alert（this.attr（id））；也是一场灾难。。。应已发出警报（$（this.attr（“id”））；谢谢你的快速回复。使用on而不是delegate是否有优势？我使用的是1.7.2。

上的

只是一个函数调用，它已经接管了bind
、delegate
和live
（本身就是delegate
的一个版本）。我认为普通事件委托没有任何实际区别，但on
是较新的语法on
还具有易于记忆的off功能，用于删除事件处理程序。
$("#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>

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