Javascript 使用循环创建多个事件侦听器

尝试使用循环创建多个侦听器。如何让它工作

var buttons = ['one', 'two', 'tree'];
$.each(keys, function(key, value) {
    $(value).click(function() {
        // do something
    });
});

---

另外，当我只需要值时，是否有一个不写入

键、值的快捷方式？
在jQuery中，您可以一起选择一些元素，并使用冒号将它们分开，

var buttons = ['one', 'two', 'tree'];
$(buttons.join()).click(function(){
  // Do something
})

在本例中，我使用join将数组转换为
1、2、3
，然后我向所有这些元素添加一个事件侦听器如果您确实想要循环（这是您的问题），您可以执行以下操作：

for(var i=0;i<buttons.length;i++)
  $(buttons[i]).click(function({
    // Do something
  })

for（var i=0；i听起来您最好将单击处理程序分配给具有特定类名的按钮，而不是遍历选择器列表并在循环中分配新函数

<button class='my-button' id="one">
  One
</button>
<button class='my-button' id="two">
  Two
</button>
<button class='my-button' id="three">
  Three
</button>


一个
两个
三

还有JS

$('.my-button').click(function() {
    var id = $(this).attr('id');
    $('body').append("<div>Button " + id + " was clicked</div>");
});

$（'.my按钮'）。单击（函数（）{
var id=$（this.attr（'id'）；
$（'body'）.append（“单击按钮“+id+”）；
});

看看这把小提琴
如果你想让它通过循环工作，那么你可以使用

var buttons = ['.one', '.two', '.three'];

// ---------------- with -------- $.each();

$.each( buttons, function(key, value) {
    $(value).click(function() {
        // ------------- Do something
    });
});


// ------------------ with ----------- for loop


for( var i=0 ; i < buttons.length ; i++ )
{
    $(buttons[i]).click(function({
    // ------------- Do something
    });
}

或如果有变量

var buttons = '.one, .two, .three, #one, #two, #three';
$(buttons).click(function() {
     // ------------- Do something
});

这就是无键、无值、无for、无each
您最好将委托事件侦听器放在父对象上，而不是遍历每个按钮。例如，如果您将所有
元素放在id为
#container
的
容器中，则您可以这样编写侦听器：

$('#container').on('click', 'button', function() {
  // do something;
});

现在，每次在该div中单击按钮元素时，都会调用回调。您还可以使用类选择器代替
'button'
，只侦听具有该类的元素。
将所有按钮放置在具有公共类的DOM中，然后像使用jqueryy一样将侦听器附加到该类我们的元素是XML，如
等。您缺少分配类或Id的一个关键因素，如：
[''one'，'two'，'two']
您是否尝试过使用委托事件侦听器？如果所有元素都在同一事件上调用同一回调，则无需在每个元素上放置单独的侦听器。要多次触发事件吗？这意味着如果数组包含3个值，则事件列表器中的代码将执行三次。它将触发w每次单击都要使用ant。默认情况下，
join（）
是一个逗号，因此不需要分隔符参数…
按钮。join（）
也会这样做，但不会在循环中创建函数。这是一种糟糕的设计。还要注意，
函数（{
实际上应该是
函数（）{
当然可以。I的定义超出了范围。请参阅如何解决它：另一种没有绑定的方法：我不会编写任何可能导致意外行为的代码。最好的方法是遵循一些干净的代码思维。
.join（）
（没有不必要的
，“
来拯救-如您的第一个答案所示）因为
$（选择器）
已经是一个可移植元素集合的jQ包装器。
$('#container').on('click', 'button', function() {
  // do something;
});