jQuery函数不绑定到新添加的dom元素

这里是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 ,它就不会显示任何东西。

你能解释一下吗?

对于2011年之后出现这个问题的用户,有一个新的正确的方法来做到这一点:

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

这是jQuery 1.7的。

有关更多信息,请参阅直接和委托事件

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

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

更新:由于live已被弃用,所以你应该使用“on()”:

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

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

我有同样的问题,就像我刚刚拉我的头发,然后我得到的解决scheme。 我使用了不同的语法

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

它不是为我工作(innerImage是dynamic创build的dom)现在我正在使用

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

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

谢谢@Moshe Katz

.click绑定到jQuery目前可见的内容。 你需要使用.live:

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

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

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

编辑: live()被弃用,你应该使用on()来代替。

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

这是因为您单击事件绑定时只绑定到现有的元素。 您需要使用活动或委托,将事件绑定到页面上的现有和将来的元素。

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

Jquery Live

您需要实时监听器而不是点击:

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

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

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

因为事件与文档中的每个匹配元素绑定在一起。 添加的任何新元素都不会自动拥有与之相关的相同事件。

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

 $('.btn_test').click 

将为页面上可用的元素添加处理程序(此时“testing”不存在!)

你必须手动添加这个元素的点击处理程序,当你做追加时,或者使用一个live事件处理程序,这将适用于每个元素,即使你稍后创build它。

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

在jquery 1.7的方法可以使用,它真的很好

 <!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/

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

你需要添加一个正确的button点击function,以给出一个正确的结果

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