jquery - 无法循环 .click 函数（创建多个按钮）

Question

我正在尝试创建多个按钮，每个按钮都在做某事。它在循环之外工作得很好each，但是当我在click函数中插入each函数时，它就不起作用了。

$.each(data.arr, function(i, s){
    html += '<div id="mybtn'+s.id+'"><button class="first">Btn1</button><button class="second">Btn2</button></div>';

    var btnclass="#mybtn"+s.id+" .first";

    $(btnclass).click(function(){
      //do something 
    });
});

请让我知道出了什么问题...

非常感谢！！！

伊兰。

Answer 1

id 选择器和类之间缺少空格

var btnclass="#mybtn"+s.id " +  .first";
                          ^ 
                        Space here .. And the 
     + sign should come after the string

还可以尝试将单击事件移到 for 循环之外并将其委托...

$.each(data.arr, function(i, s){
    html += '<div id="mybtn'+s.id+'"><button class="first">Btn1</button><button class="second">Btn2</button></div>';

});

 $('body').on('click', '.first' , function(){
      //do something 
    });

Answer 2

$.each(data.arr, function(i, s){
  html += '<div id="mybtn'+s.id+'"><button class="first">Btn1</button><button   class="second">Btn2</button></div>';
  var btnclass="#mybtn"+Id+" .first";
  $(btnclass).click(function(){
    //do something });
  });
});

1. 您将事件分配给<div>，而不是按钮

2. 这也失败了，因为你没有“Id”

3. 从不将 HTML 添加到任何内容 = 没有任何事件

“正确”的方式（猜测意图）：

$.each(data.arr, function(i, s){
  var html = '<div id="mydiv'+s.id+'">';
  html += '<button id="mybtn1'+s.id+'" class="first clickbtn">Btn1</button>';
  html += '<button id="mybtn2'+s.id+'" class="second clickbtn">Btn2</button>';
  html += '</div>';

  $(someElement).append(html);

  $(".clickbtn").on('click', function(){
     //do something });
  });
});

Answer 3

不

var btnclass="#mybtn"+Id+" .first";

应该

var btnclass="#mybtn"+s.id+" .first";

?

此外，您需要将 html 变量的内容附加到 DOM，以便单击事件可以找到它。