jQuery 函数未绑定到新添加的 dom 元素答案

【问题标题】：jQuery function not binding to newly added dom elementsjQuery 函数未绑定到新添加的 dom 元素
【发布时间】：2011-06-30 15:35:38
【问题描述】：

这里是index.html：

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

如果我点击test1 链接，它会显示alert('test')，但如果我点击add 链接然后点击test，它不会显示任何内容。

你能解释一下吗？

【问题讨论】：

和 10000 人刚刚写了相同的答案
@Bad Display Name: 然后修复它，不要成为一个混蛋。

标签： javascript jquery onclick

【解决方案1】：

对于 2011 年之后提出此问题的用户，有一种新的正确方法可以做到这一点：

$(document).on('click', '.btn_test', function() { alert('test'); });

这是从 jQuery 1.7 开始的。

欲了解更多信息，请参阅Direct and delegated events

【讨论】：

希望我可以选择答案作为“已接受的答案”。感谢您节省了我（剩余的）一天！
在我看到这个之前，我一直在我的整个项目中使用 unbinding() 和重新绑定方法。问这个的人在哪里？伙计，接受它。
迷人又酷！感谢您添加此说明。为我解决了一个令人烦恼的问题。
您应该补充一点，解决此问题的正确方法是添加“选择器”参数。我在阅读链接后想通了，但不是因为你的回答。我仍然很感激:) @Moshe Katz
$(document) 很好，但为了获得最佳性能，最好使用 $("#element") 或 $(".class") 代替 - 元素或类已经存在于大教堂。而不是让 jquery 监视整个文档，它只会监视 #element 或 .class。

【解决方案2】：

您需要使用“实时”点击侦听器，因为最初只会存在单个元素。

$('.btn_test').live("click", function() { 
   alert('test'); 
});

更新：由于 live 已被弃用，您应该使用“on()”：

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

【讨论】：

是的，澄清一下 - live 是一个后期绑定动态处理程序，它可以在声明处理程序后附加到添加到 DOM 的元素。请参阅this documentation 了解更多信息。
另一种说法是：.click() 仅适用于页面加载时存在的对象，但.live() 将适用于现在存在或将来创建的所有对象。
我有一个新问题，我该如何使用 live 方法 ->steamdev.com/zclip
@Ralsk28：如果这个答案对您有所帮助，您可以通过投票来奖励 Pete，并点击检查以接受它。这也将帮助该网站的未来访问者找到解决他们自身问题的方法。
live() 现在已被弃用，不是吗？有什么选择？

【解决方案3】：

我有同样的问题，比如我刚刚拉扯头发的问题，然后我得到了解决方案。我使用了不同的语法

$(".innerImage").on("click", function(){ 
alert("test");
});

它对我不起作用（innerImage 是动态创建的 dom）现在我正在使用

$(document).on('click', '.innerImage', function() { alert('test'); });

http://jsfiddle.net/SDJEp/2/

感谢@Moshe Katz

【讨论】：

【解决方案4】：

.click 绑定到当前对 jQuery 可见的内容。您需要使用 .live：

$('.btn_test').live('click', function() { alert('test'); });

【讨论】：

我认为这是解决这个问题的最佳答案。

【解决方案5】：

改用 Jquery live。这是它的帮助页面http://api.jquery.com/live/

$('.btn_test').live(function() { alert('test'); });

编辑：live() 已弃用，您应该改用 on()。

$(".btn_test").on("click", function(){ 
   alert("test");
});

【讨论】：

.live() 已弃用，请使用 .on()。
@silkfield 我更新了我的答案。但下次请建议编辑而不是投反对票。 SO 是一个社区问答论坛，我们都可以改进。
但我不认为 .on() 提供了与 .live() 相同的动态功能。文档说该元素在其调用时必须存在。

【解决方案6】：

这是因为你的 click 事件在绑定时只绑定到现有元素。您需要使用 live 或 delegate 将事件绑定到页面上现有和未来的元素。

$('.btn_test').live("click", function() { alert('test'); });

Jquery Live

【讨论】：

【解决方案7】：

你需要live listener 而不是点击：

$('.btn_test').live('click', function() { 
   alert('test'); 
});

原因是click 仅在页面加载时将侦听器分配给元素。添加的任何新元素都不会有此侦听器。 Live 在页面加载时以及之后添加时将点击监听器添加到元素

【讨论】：

【解决方案8】：

当文档加载时，您将事件侦听器添加到每个匹配的类以侦听这些元素上的单击事件。相同的侦听器不会自动添加到您稍后添加到 Dom 的元素中。

【讨论】：

【解决方案9】：

因为事件绑定到文档中的每个匹配元素准备就绪。添加的任何新元素都不会自动关联相同的事件。

您必须在添加后手动将事件绑定到任何新元素，或者使用实时监听器。

【讨论】：

【解决方案10】：

$('.btn_test').click

将为页面上可用的元素添加处理程序（此时'test'不存在！）

您必须在追加时手动为此元素添加点击处理程序，或者使用live 事件处理程序，即使您稍后创建它也适用于每个元素..

$('.btn_test').live(function() { alert('test'); });

【讨论】：

【解决方案11】：

jquery 1.7 on 方法之后就可以使用了，真的很好用

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

查看实际情况 http://jsfiddle.net/rahulchaturvedie/CzR6n/

【讨论】：

【解决方案12】：

或者只是在页面末尾运行脚本

【讨论】：

【解决方案13】：

您需要添加适当的按钮单击功能才能给出正确的结果

$("#btn1").live(function() { alert("test"); });

【讨论】：