用数组动态注册事件
我试图编写一个小的jQuery脚本，但是遇到了一个问题。我有一个对象数组，其中包含html和一些事件，这些事件应该在HTML加载到DOM后触发。
出于测试目的，我将对象数组简化为一个对象：
<!doctype html>
<html>
<head><title>Test</title></head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="wrapper"></div>
<script>
var element = {
id : 'xyz',
html : '<div id="xyz"><label>ABC</label><input type="text"></div>',
events : [
{
'selector':'label',
'event_name':'click',
'callback':function( event, element ){
alert( '[EVENT] Click <label>' );
console.log( event );
console.log( element );
}
},
{
'selector':'input',
'event_name':'change',
'callback':function( event, element ){
alert( '[EVENT] Change <input>' );
console.log( event );
console.log( element );
}
}
]
}
$( document ).ready( function(){
$( element.html ).appendTo( '#wrapper' );
for( var i = 0; i < element.events.length; i++ ){
//var eventReg = $.extend({},element.events[i]); //Its not a object-clone-problem
var eventReg = element.events[i];
console.log( eventReg.event_name );
console.log( eventReg.selector );
console.log( '#####################' );
$( '#'+ element.id ).on( eventReg.event_name, eventReg.selector, function( event ){eventReg.callback( event, this )} );
}
});
</script>
</body>
</html>element-object有一个id "xyz“(它也是将被插入的div的id )。一旦文档准备就绪，我就将HTML (element.html)添加到div#wrapper中。现在我运行element.events中的所有对象。这些对象包含一个选择器、一个事件名和一个回调函数。由于事件也是动态的，所以我希望使用$.on()方法来注册事件。我绑定div#xyz上的事件，它现在在DOM中，包含元素。好吧，我想你明白了，我试过的。
现在:我的问题是，当我运行脚本时，当我单击<label>时，我希望收到一个不同的alert()，当我更改<input>值时，会收到一个不同的alert()。但是在这两个事件中，相同的回调函数(我的数组中的最后一个)被注册.
因此，单击<label>也调用<input>-change事件的callback()。有人能给我个提示吗，我错过了什么？非常感谢。
编辑解决方案
胡安注意到，这个问题其实是重复的。嗯，这是技术上的，但我在应用解决方案时遇到了问题。幸运的是，胡安已经在评论中给了我答案。我需要一点，但我想在这里添加它，因为它可能对其他人有帮助：
$( '#'+ element.id ).on( eventReg.event_name, eventReg.selector, (function(cb){return function( event ){cb( event, this )}} )(eventReg.callback));回答 1
Stack Overflow用户
发布于 2015-10-06 12:09:06
<!doctype html>
<html>
<head><title>Test</title></head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="wrapper"></div>
<script>
var element = {
id : 'xyz',
html : '<div id="xyz"><label>ABC</label><input type="text"></div>',
events : [
{
'selector':'label',
'event_name':'click',
'callback':function( event, element ){
alert( '[EVENT] Click <label>' );
console.log( event );
console.log( element );
}
},
{
'selector':'input',
'event_name':'change',
'callback':function( event, element ){
alert( '[EVENT] Change <input>' );
console.log( event );
console.log( element );
}
}
]
}
$( document ).ready( function(){
$( element.html ).appendTo( '#wrapper' );
for( var i = 0; i < element.events.length; i++ ){
//var eventReg = $.extend({},element.events[i]); //Its not a object-clone-problem
var eventReg = element.events[i];
console.log( eventReg.event_name );
console.log( eventReg.selector );
console.log( '#####################' );
$( '#'+ element.id ).on( eventReg.event_name, eventReg.selector, function( event ){eventReg.callback( event, this )} );
}
});
</script>
</body>
</html>请尝尝这个。我相信你所缺少的是第37行“元素”应该是“元素”。尝试检查您的JS控制台下一次出现的错误，这会弹出。
编辑:这是工作代码：https://jsfiddle.net/zwx4quuh/
https://stackoverflow.com/questions/32969453
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号