![](/img/trans.png)
[英]How do I attach event handlers using jQuery only to newly added elements?
[英]how to attach jquery event handlers for newly injected html?
如果还没有生成HTML,我将如何使用.on()
? jQuery页面说
如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。
但我不确定该怎么做。 有没有办法“重新加载”事件处理程序?
所以,如果我有
$(document).ready(function(){
$('.test').on('click', function(){
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
其中generatePage()用.test
创建了一堆div,我将如何重新绑定.on()
?
我知道有类似的问题已被问到,但是在快速搜索之后我找不到我想要的东西。
使用.on,如下例所示。 可以假设body-tag始终可用,因此将事件处理程序附加到body并将事件委托给选择器是安全的,在本例中为.test 。
$(document).ready(function(){
$('body').on('click', '.test', function(){ // Make your changes here
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
或者如果generatePage()也生成html,head和body标签使用document作为选择器。
$(document).ready(function(){
$(document).on('click', '.test', function(){ // Make your changes here
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
根据jquery文档 .on接受以下参数:
.on( events [, selector] [, data], handler(eventObject) )
包括选择器描述如下:
提供选择器时,事件处理程序称为委托。 当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素)。 jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.