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"); });
我有同样的问题，就像我刚刚拉我的头发，然后我得到的解决scheme。 我使用了不同的语法
$(".innerImage").on("click", function(){ alert("test"); });
它不是为我工作（innerImage是dynamic创build的dom）现在我正在使用
$(document).on('click', '.innerImage', function() { alert('test'); });
谢谢@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>
或者只是在页面末尾运行脚本
你需要添加一个正确的button点击function，以给出一个正确的结果
$("#btn1").live(function() { alert("test"); });
