使用数组动态注册事件

Register events dynamically with array

本文关键字：注册 事件 动态 数组      更新时间：2023-09-26

我尝试编写一个小的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对象有一个 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));

<!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/

相关文章：