点击事件不适用于dynamic生成的元素
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("h2").html("<p class='test'>click me</p>") }); $(".test").click(function(){ alert(); }); }); </script> </head> <body> <h2></h2> <button>generate new element</button> </body> </html> 我试图通过单击button在<h2>使用class name test生成一个新标签。 我还定义了一个与test相关的点击事件。 但事件不起作用。
谁能帮忙？
您使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。 它不会被绑定到未来创build的元素。 要做到这一点，你必须使用on()来创build一个“委托”绑定。
委托事件的优点是，他们可以处理后来添加到文档中的后代元素的事件。
资源
这是你要找的东西：
var counter = 0; $("button").click(function() { $("h2").append("<p class='test'>click me " + (++counter) + "</p>") }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h2></h2> <button>generate new element</button>
使用带有委派事件的.on()方法
$('#staticParent').on('click', '.dynamicElement', function() { // Do something on an existent or future .dynamicElement });
.on()方法允许您将任何期望的事件处理程序委托给：
当前元素或将来添加到DOM的未来元素。
PS：不要使用.live() ！ 从jQuery 1.7+ .live()方法已被弃用。
原因：
Click（） – 仅当元素已经存在于html代码中时才附加事件处理程序。
它不会考虑在加载页面之后dynamic创build的新元素（Future元素）。
dynamic元素是在javascript或jquery（而不是html）的帮助下创build的。
所以点击事件不会触发。
解答：
为了克服这个，我们应该使用on（）函数。
delegate（），live（）和on（）函数比DOM元素有优势。
可以触发既有的要素，也可以触发未来的要素。
可以考虑整个页面中都存在的元素。
delegate（），live（）函数被弃用（不要使用这些）。
您应该使用on函数来触发dynamic创build的（未来）元素上的事件。
从$（document）.ready中删除代码：
$(".test").click(function(){ alert(); });
变成：
$(document).on('click','.test',function(){ alert('Clicked'); });
更改
$(".test").click(function(){
至
$(".test").live('click', function(){
现场演示
jQuery .live()
您需要使用.live才能正常工作：
$(".test").live("click", function(){ alert(); });
或者如果你使用jQuery 1.7+使用.on ：
$(".test").on("click", "p", function(){ alert(); });
尝试.live()或.delegate()
http://api.jquery.com/delegate/
您的.test元素是在.click()方法之后添加的，因此它没有附加事件。 Live和Delegate将该事件触发器提供给检查其子项的父元素，因此之后添加的任何内容仍然有效。 我认为Live将检查整个文档体，而Delegate可以被赋予一个元素，所以Delegate更有效率。
更多信息：
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
在你的js文件中添加这个函数。 它将在每个浏览器上工作
$(function() { $(document).on("click", '#mydiv', function() { alert("You have just clicked on "); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='mydiv'>Div</div>
我在jQuery的文档中find了两个解决scheme：
第一：在正文或文档上使用委托
例如：
$("body").delegate('.test', 'click', function(){ ... alert('test'); });
为什么？
回答：根据一组特定的根元素，将处理程序附加到与现在或将来匹配select器的所有元素的一个或多个事件。 链接： http ： //api.jquery.com/delegate/
第二：把你的函数放在“$（document）”上 ，使用“on”并把它附加到你想要触发的元素上。 第一个参数是“事件处理程序”，第二个参数是元素，第三个是函数。 例如：
$( document ).on( 'click', '.test', function () { ... alert('test'); });
为什么？
答：事件处理程序只绑定到当前选定的元素; 它们必须在代码调用.on（）时存在于页面上。 为确保元素存在且可以select，请在文档就绪处理程序中为页面上的HTML标记中的元素执行事件绑定。 如果将新的HTML注入页面，请在将新的HTML放入页面后select元素并附加事件处理程序。 或者，使用委托事件附加一个事件处理程序，如下所述… link： https ： //api.jquery.com/on/
使用委托对dynamic生成的内容应用事件的最佳方法。
$(document).on("eventname","selector",function(){ // code goes here });
所以你的代码现在是这样的
$(document).on("click",".test",function(){ // code goes here });
你遇到的问题是，你正试图绑定“testing”类的事件之前有什么与DOM的“testing”类。 虽然看起来好像全是dynamic的，但是实际上发生的事情是JQuery在传递ready()函数的时候，通过DOM传递了click事件，这是在你的button事件中创build“Click Me”之前发生的。
通过将“testing”Click事件添加到“button”单击处理程序，它将在DOM存在正确的元素之后将其连接起来。
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h2").html("<p class='test'>click me</p>") $(".test").click(function(){ alert() }); }); }); </script>
使用live() （正如别人指出的）是另一种方法，但我觉得指出你的JS代码中的小错误也是一个好主意。 你写的东西没有错，只是需要正确的范围。 掌握DOM和JS的工作方式对于许多传统开发人员来说是一件棘手的事情。
live()是处理这个问题的一种更简洁的方法，在大多数情况下，这是正确的方法。 它基本上是在观察DOM并在其中的元素发生变化时重新布线。
.livefunction很好。
这是dynamic添加元素的阶段。
$('#selectAllAssetTypes').live('click', function(event){ alert("BUTTON CLICKED"); $('.assetTypeCheckBox').attr('checked', true); });
干杯，Ankit。
.on工作正常，但是在执行上面的一些解决scheme时，我遇到了一些问题。 我使用.on问题在于它以某种方式呈现与.hover方法不同的事件。
对于也可能有问题的任何人来说。 我通过重新注册dynamic添加项目的hover事件来解决我的问题：
重新注册hover事件，因为hover不适用于dynamic创build的项目。 所以每次我创build新的/dynamic项目我再次添加hover代码。 完美的作品
$('#someID div:last').hover( function() { //... }, function() { //... } );
我无法得到生活或委托工作在一个灯箱（微盒）的股利。
我用下面简单的方法成功地使用了setTimeout：
$('#displayContact').click(function() { TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true}); setTimeout(setContactClick, 1000); }) function setContactClick() { $('#contactSubmit').click(function() { alert($('#contactText').val()); }) }
你也可以在元素中使用onclick="do_something(this)"
一个替代和更简洁的替代（恕我直言）是使用一个原始的JavaScript函数，响应点击事件，然后传递目标元素回jQuery，如果你喜欢。 这种方法的优点是你可以在任何地方dynamic地添加你的元素，并且点击处理程序将“正常工作”，而不需要关心把控制委派给父元素等等。
第1步：更新dynamicHTML以触发onclick事件。 一定要传递“事件”对象作为参数
$（“button”）。click（function（）{
$（“h2”）。html（“<p class =' test'onclick ='test（event）' >点击我</ p>”）
}）;
步骤2：创buildtestingfunction以响应点击事件
functiontesting（e）{
警报（）;
}）;
可选步骤3：鉴于您使用的是jQuery，我假设将参考返回到源button将会很有用
functiontesting（e）{
警报（）;
//获取对button的引用
//这条线的解释可以在这里find
var target =（e.target）？ e.target：e.srcElement;
//将button引用传递给jQuery来做jQuery魔术
var $ btn = $（target）;
}）;
我正在使用dynamic添加新元素的表格，在使用on（）时，使其适用于我的唯一方法是使用非dynamic父项：
<table id="myTable"> <tr> <td></td> // Dynamically created <td></td> // Dynamically created <td></td> // Dynamically created </tr> </table> <input id="myButton" type="button" value="Push me!"> <script> $('#myButton').click(function() { $('#myTable tr').append('<td></td>'); }); $('#myTable').on('click', 'td', function() { // Your amazing code here! }); </script>
这是非常有用的，因为要移除用on（）绑定的事件，你可以使用off（） ，并且使用一次事件，你可以使用one（） 。
$(.surrounding_div_class).on( 'click', '.test', function () { alert( 'WORKS!' ); });
仅在类.surrounding_div_class的DIV是对象.test的直接父对象时才有效
如果有div中的另一个对象将被填充它不会工作。
您可以添加点击dynamic创build的元素。 下面的例子。 使用何时确保完成。 在我的例子中，我正在抓取类扩展的div，添加一个“click to see more”span，然后使用该span来隐藏/显示原始div。
$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){ $(".clickActivate").click(function(){ $(this).next().toggle(); }) });
如果您有添加到某个容器或身体的链接：
var newLink= $("<a></a>", { "id": "approve-ctrl", "href": "#approve", "class": "status-ctrl", "data-attributes": "DATA" }).html("Its ok").appendTo(document.body);
你可以把它的原始JavaScript元素，并添加一个事件监听器，如点击 ：
newLink.get(0).addEventListener("click", doActionFunction);
无论你添加这个新的链接实例多less次，你都可以像使用jquery click函数那样使用它。
function doActionFunction(e) { e.preventDefault(); e.stopPropagation(); alert($(this).html()); }
所以你会收到一条消息说
没关系
它比其他的select有更好的performance。
额外 ：你可以获得更好的性能，避免jQuery和使用普通的JavaScript。 如果您使用的是最高版本为8的IE，则应使用此polyfill来使用方法addEventListener
if (typeof Element.prototype.addEventListener === 'undefined') { Element.prototype.addEventListener = function (e, callback) { e = 'on' + e; return this.attachEvent(e, callback); }; }
点击时使用'on'绑定已经存在的元素。
例如
$('test').on('click',function(){ alert('Test'); })
这将有所帮助。
