Question

I’m trying to create multiple buttons that each one of them doing something. It is working great outside of the each loop, but the moment I insert the click function in the each function, it doesn’t work.

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

Please let me know what is wrong…

Thank you very much!!!

Eran.

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

1. you assign the event to the <div>, not the button

2. this also fails, since you not have an “Id”

3. never adds the HTML to anything = no events either way

“right” way (guessing intention) :

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