Question

我正在构建一个小部件，它调用数组中每个jQuery DOM元素上的特定插件。

MyApp.forms是一个对象数组。每个Object都有一个jQuery包装的DOM元素。

我正在做以下事情：

$(MyApp.forms).each(function(i){
    var individualForm = this;
    /*
    individualForm is an Object {
        prop: 'value,
        $el: somejQueryElement,
        ...
    }
    */
    individualForm.$el.thePlugin({
        // options
    })
    .on('pluginEvent', function() {
        individualForm; // refers to the last object in MyApp.forms
        this; // refers to the last 
        $(this); // same problem
    }).on('pluginEvent2', function() {
        // same problem as above here.
    });
});

事件pluginEvent和pluginEvent2附加到所有individualForm的{{1}}。但是当他们开火时，我总是得到最后一个元素我觉得这是一个常见的JavaScript Closure问题。

我尝试使用$el循环并在其中创建for但它不起作用，因为该函数在事件触发时执行。虽然两个事件都触发了所有元素，但我只将处理程序附加到最后执行的元素。

更新：

找到修复程序。但不知道为什么以及如何运作。每个IIFE元素都是individualForm.$el元素input。

代码中的其他地方，另一位开发人员使用旧版本的jQuery进行class="some-class"。然后再使用更新版本的jQuery（使用$('.some-class').bind(... noConflict）。页面上有2 $个。解决方法是删除第一个jQuery。

Answer 1

请你试试以下内容：

$(MyApp.forms).each(function(i){
    var form = this;
    (function(individualForm) {
        individualForm.$el.on('something', function() {
            individualForm; // refers to the last object in MyApp.forms
            this; // refers to the last 
            $(this); // same problem
        }).on('somethingElse', function() {
            // same problem as above here.
        });
    })(form);
});

你应该将individualForm包装在一个闭包中。否则，范围会更改，并指向数组的最后一个元素。

关于Array中jQuery元素的常见JavaScript Closure问题

1 个答案: