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

Question

如何使这个 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"。

提前致谢:)

Answer 1

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

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

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

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

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

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

Answer 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
    });
}

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

Passing variable to jQuery on() method

jquery

events

delegates