无法与jQuery添加的dom对象进行交互追加

我已经使用append将tr和td标记添加到表中，但我似乎并不知道dom对象存在（我认为这就是append/prepend的作用了吗？）。当我运行该脚本时，表格行被添加并且用户可以看到它，但是jQuery不捕获超链接上的单击处理程序或其他任何东西。我在另一个非常棒的页面上做了同样的事情。我也包括这一点。如果有人能够告诉我我的思路如何脱轨，我会非常感激。此外，如果我以错误的方式讨论这个问题，请让我知道，这样我可以改进。无法与jQuery添加的dom对象进行交互追加

断码：

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

来源

2012-07-03 Travis

请提供***断码***合适的片段，你忘了包括''标签？如果是这样，你还“忘记”排除了什么？ – xandercoded

什么都没有。 :)这是所有相关的代码。 – Travis

alert（this.attr（id））;也是一场灾难...应该已经警觉（$（this）.attr（“id”））; – Travis

您正在定义您的事件h在页面上有任何.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)); 
});

来源

2012-07-03 17:14:32 jackwanders

感谢您的快速反应。在代理上使用是否有优势？我正在使用1.7.2。 – Travis

'on'只是接管'bind'，'delegate'和'live'（本身就是'delegate'的一个版本）的单个函数调用。我认为对于正常的事件委托并没有任何实际的区别，但'on'是更新的语法。 'on'还具有易于记忆的'off'功能来移除事件处理程序。 – jackwanders

对于动态创建的元素，你需要的live功能：

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

使用，点击，悬停和所有类型的功能。

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

来源

2012-07-03 17:12:29

'live'已被弃用... – xandercoded

@Xander好点..仍然使用较老的jQuery。关于时间我会改变我的脚本，然后 –

我已经使用委托之前，并在这样做，我看到生活被弃用。我很惊讶有多少人仍在使用它。 – Travis

你必须在.append一个错字（忘了加斜线），修复损坏的HTML，它应该工作：

来源：

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

要：

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

来源

2012-07-03 17:13:31 xandercoded

他是对的。这不是你上面提到的问题的原因，但它是一个问题。 – Grinn

@Grinn当他提供的代码只是一个片段时，你怎么知道它不存在？你假设代码是*不*封装在一个事件中。他没有'

使用$(document)选择器，同时追加dom，live和delegate不推荐。例如：

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

来源

2015-05-27 11:39:45

无法与jQuery添加的dom对象进行交互追加

回答

相关问题