将变量传递给 jQuery on() 方法答案

【问题标题】：Passing variable to jQuery on() method将变量传递给 jQuery on() 方法
【发布时间】：2015-07-17 15:09:31
【问题描述】：

我怎样才能使这个 jQuery 代码工作？我已经在“someVariable”中兑现了一些元素，我想在 on() 方法中使用它，如下所示：

function test() {
    var elementsBlock = $('.elements-block'),
        someVariable1 = elementsBlock.find('.some-el-1'),
        someVariable2 = elementsBlock.find('.some-el-2'),
        ...
        someVariableN = elementsBlock.find('.some-el-n');

    // some code

    elementsBlock.on('click', someVariableN, function() {
        // do sth
    });
}

test();

我想在参数中传递变量，而不是选择器（“.some-el-n”）。是否可以？如果我运行此函数，则事件仅适用于“elementsBlock”而不适用于“someVariableN”。

提前致谢:)

【问题讨论】：

感谢您的所有回复。嗯...而不是 someVariableN.on('click', function() {...}) 或 someVariableN.click(function() {...});我想使用这种形式的 on() 方法，因为我读到它比提到的两种方法更快。
嗯...在提高性能之前，您应该尝试看看是否真的存在性能问题。

标签： jquery events delegates

【解决方案1】：

不，你不能。对于event delegation，您必须使用选择器。它用于捕获对动态创建的元素的点击。如果您已经知道存在的元素，则不需要事件委托：

someVariableN.on('click', function() {
    // do sth
});

如果您想附加以 some-el 类开头的变量，您可以使用事件委托：

elementsBlock.on('click', '[class^="some-el"]', function() {
    // do sth
});

但是，如果这些元素都不是动态创建的，那么下面的行会做同样的事情：

$('[class^="some-el"]').on('click', function() {
    // do sth
});

【讨论】：

【解决方案2】：

对于许多来自其他语言的程序员来说，这有点奇怪，但在 JavaScript 中，您可以访问在函数外部声明的变量。（如果需要示例，请查看w3school JavaScipt closures）

在您的情况下，这意味着您可以访问 someVariableN 而无需将其作为参数传递：

function test() {
    var elementsBlock = $('.elements-block'),
        someVariable1 = elementsBlock.find('.some-el-1'),
        someVariable2 = elementsBlock.find('.some-el-2'),
        ...
        someVariableN = elementsBlock.find('.some-el-n');

    elementsBlock.on('click', function() {
        alert(someVariableN.length);  //You can use someVariableN here
    });
}

【讨论】：