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

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

破码:

$("#addAdmin").click(function(){ $("#chosenAdmins").append('' + $("#admins option:selected").text() + ' Remove'); }); $(".removeAdmin").click(function(e){ e.preventDefault(); alert('clicked'); alert(this.attr(id)); });  bob smith   

在不同页面上工作的类似代码是:

  $(document).ready(function() { var leftData = '
left Stuff
'; var leftData = leftData + '
left Stuff
'; var rightData = '
right Stuff
'; var rightData = rightData + '
right Stuff
'; $("#selector").prepend("
"+leftData+"
"+rightData+"
"); $("#l1").click(function(){ $(this).hide("fast", function(){ $(this).prependTo('#rightSelect'); $(this).show("fast"); }); }); });

在页面上有任何.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('' + $("#admins option:selected").text() + ' Remove'); $(".removeAdmin", tr).click(function(e){ e.preventDefault(); alert('clicked'); alert(this.attr(id)); }); });   

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

对于动态创建的元素,您需要live函数:

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

使用,单击,hover和所有类型的function。

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

你在.append有一个拼写错误(忘了添加正斜杠),修复破坏的HTML ,它应该工作:

从:

 ...Remove') 

至:

 ...Remove') 

使用$(document)选择器,同时附加dom, livedelegate不推荐。 例如 :

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