javascript - 分配点击监听器时出现意外的范围问题

Question

当我的 loadNav() 函数循环遍历 nav 数组并将点击监听器分配给动态创建的元素时，一切似乎都很好。如果我在第一次循环中 break 通过 navItem.id 是 'newGL' 并且第二次通过它是 'litGL' ，因为它应该是。

但是当我在循环完成后检查监听器时，它们都有 'litGL' 的 id(还有 'b' 的类型)。但是元素本身具有正确的 navItem.text，所以我想我不明白如何在传递给 .click 方法的函数中分配变量。

关于为什么我的第一次点击监听器被第二次点击监听器的值覆盖的任何提示？

var nav = [
    {
        id:'newGL',
        text:'new',
        type:'a'
    },
    {
        id:'litGL',
        text:'lit',
        type:'b'
    }
]

function loadNav(nav){
    for(item in nav){
        var navItem = nav[item];
        var element = $("<div>" + navItem.text + "</div>");
        element.click(function(){
            getContent(navItem.id,navItem.type);
            //in practice I'm getting two click listeners with a navItem.id of 'litGL' and a navItem.type of 'b'
        });
        $('#horzNav').append(element);
    }
}

Answer 1

直接的问题是当事件触发很久以后，navItem 的值就不同了。要解决此常见问题，请使用作用域 IIFE(立即调用的函数表达式):

function loadNav(nav){
    for(item in nav){
        var navItem = nav[item];
        var element = $("<div>" + navItem.text + "</div>");
        (function(navItem){
            element.click(function(){
                getContent(navItem.id,navItem.type);
                //in practice I'm getting two click listeners with a navItem.id of 'litGL' and a navItem.type of 'b'
            });
        })(navItem);
        $('#horzNav').append(element);
    }
}

更好的解决方案包括将 require 属性放入注入(inject)的元素中，然后在事件发生时提取它们。这简化了事件处理程序并消除了对原始 navItem 变量的依赖。

例如像这样的东西:

function loadNav(nav){
    for(var i = 0; i < nav.length; i++){
        var navItem = nav[i];
        var element = $("div", {id: navItem.id}).html(navItem.text).data('type', navitem.type ).appendTo('#horzNav');
    }
}

并使用带有选择器的委托(delegate)事件处理程序:

$(function () {
    $(document).on("click", ".navItem", function () {
        getContent($(this).attr("id"), $(this).data("type"));
    });
});

这是通过监听事件(例如点击)来冒泡到一个不变的祖先元素(例如 document)，然后将选择器应用于项目在气泡链中，然后仅将函数应用于那些导致事件的匹配元素。

这样做的结果是项目只需要在事件时间匹配，而不是在事件注册时匹配。非常适合动态添加的项目。

document 是最好的默认值，如果没有其他祖先更接近/方便的话。不要将 body 用于委托(delegate)事件，因为它有一个错误(样式可能导致它无法获得鼠标事件)。