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

【问题标题】：it's not possible to loop .click function (To create multiple buttons)无法循环 .click 函数（创建多个按钮）
【发布时间】：2012-10-08 00:16:44
【问题描述】：

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

$.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 
    });
});

请告诉我出了什么问题...

非常感谢！！！

伊兰。

【问题讨论】：

标签： jquery html ajax each

【解决方案1】：

$.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 });
  });
});

您将事件分配给<div>，而不是按钮
这也失败了，因为您没有“Id”
从不将 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 });
  });
});

【讨论】：

谢谢！这就是问题所在！我只是没有完成HTML代码，我之前调用了click函数......
修复它：稍后只需调用 Click 函数（或在完成 HTML 代码后使用 .click 函数运行另一个 .each 函数）。谢谢！！

【解决方案2】：

没有

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

应该是

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

另外，你需要将你的 html 变量的内容附加到 DOM 中，这样点击事件才能找到它。

【讨论】：

【解决方案3】：

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

【讨论】：