Question

我有一个我创建的hashmap来控制按钮的事件。定义如下：

var Signage_Manager = {

init: function() {

    Signage_Manager.buttonActions.set_events();

},
buttonActions: {
    buttons: {

        '#add_product': {action: 'navigate', href: '/manager/add_product'},
        '.back_to_dashboard': {action: 'navigate', href: '/manager/dashboard'}

    },
    set_events: function() {
        for(var button in Signage_Manager.buttonActions.buttons){   
            if(Signage_Manager.buttonActions.buttons[button].action == 'navigate') {
                $(button).live('click', function() {
                    console.log(Signage_Manager.buttonActions.buttons[button].href);                                                 
                });
            }
            else {
                $(button).live('click', function() {
                    //
                    console.log('not navigate');                                                     
                });
            }
        }
    }
}
};

问题是当我点击'add_product'按钮时，它会尝试使用href'/ manager / dashboard'，而不是定义行中的'/ manager / add_product'字符串。

有人可以在这里提供帮助吗？

Answer 1

由于闭包，您的实时函数将关闭相同的按钮变量，该变量会在每次迭代中发生变化。所以最后所有事件处理程序都将使用相同的按钮：最后一个。为了保留按钮名称，您可以为事件处理程序创建内部范围，以确保每个函数都具有自己的 jQuery选择器。

if (Signage_Manager.buttonActions.buttons[button].action == 'navigate') {
  (function(button) {
    $(button).live('click', function () {
      console.log(Signage_Manager.buttonActions.buttons[button].href);
    });
  })(button);
}

Answer 2

在live()调用中，您可以引用外部作用域的button变量。当您单击一个按钮并执行匿名函数时，循环已经完成，因此按钮等于散列表的最后一个元素。您必须为每个按钮存储哈希表元素。

使用data（）方法的可能解决方案可能是：

$(button).data("button", Signage_Manager.buttonActions.buttons[button]).live('click', function() {
    console.log($(this).data("button").href);                            
});

Javascript数组遍历覆盖键值

2 个答案: