如何将事件绑定动态创建的元素？
如何将事件绑定动态创建的元素？
提问于 2018-05-30 05:14:16
我有一些代码在循环浏览页面上的所有选择框，并将一个.hover事件绑定到它们，以便在它们的宽度上进行一些操作mouse on/off。
这发生在页面准备就绪，并工作得很好。
我遇到的问题是，在初始循环之后，通过Ajax或DOM添加的任何选择框都不会绑定事件。
我找到了这个插件（jQuery Live Query Plugin），但在我用插件添加另一个5k到我的页面之前，我想知道是否有人知道一种方法来做到这一点，无论是直接或通过其他选项。
回答 2
Stack Overflow用户
发布于 2018-05-30 13:37:27
可以在创建对象时将对象添加到对象中。如果在不同的时间将相同的事件添加到多个对象，创建一个命名函数可能是一条可行的路。
var mouseOverHandler = function() {
// Do stuff
};
var mouseOutHandler = function () {
// Do stuff
};
$(function() {
// On the document load, apply to existing elements
$('select').hover(mouseOverHandler, mouseOutHandler);
});
// This next part would be in the callback from your Ajax call
$("<select></select>")
.append( /* Your <option>s */ )
.hover(mouseOverHandler, mouseOutHandler)
.appendTo( /* Wherever you need the select box */ )
;
Stack Overflow用户
发布于 2018-05-30 14:27:42
这是一个纯粹的JavaScript解决方案，没有任何库或插件：
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'bu')) {
// .bu clicked
// Do your thing
} else if (hasClass(e.target, 'test')) {
// .test clicked
// Do your other thing
}
}, false);
这里hasClass是
function hasClass(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
使用更现代的JS，hasClass可以实现为：
function hasClass(elem, className) {
return elem.classList.contains(className);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004614
复制相关文章
相似问题