dynamically created button and its own value

Question

How to get data-index of clicked button:

var removePair = $("button[name=removePair]"),
    tbody = $('tbody[name=tb-table]'),  

function DrawHtml(list) {
    var html = '';
    for (var i = 0; i < list.length; i++) {
        var o = list[i];
        html += '<tr name="row-' + i + '">';
        html += '   <td>';
        html += '       <button name="removePair" data-index="' + i + '" class="btn btn-primary mx-1" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button>';
        html += '   </td>';
        html += '</tr>';
    }
    return html;
}

$(tbody).on("click", removePair, function () {
    console.log($(this));
    console.log($(this).val());
    console.log($(removePair));
});

The only way that I know to add event on dynamiclly added button is to attache it to parrent (tbody), and fire by dynamiclly created button removePair, but I dont know how to get clicked removePair for further logic.

this return tbody instead of removePair

thanks!!

Pass selector to on() method instead of elements. Use removePair = "button[name=removePair]" — Satpal
– Satpal, Commented Jul 16, 2019 at 11:49
try var removePair = "button[name=removePair]", tbody = 'tbody[name=tb-table]'; — Roy Bogado
– Roy Bogado, Commented Jul 16, 2019 at 11:59
$(tbody).on("click", "button[name=removePair]", function () { console.log($(this)); }); is working — szkut
– szkut, Commented Jul 16, 2019 at 12:04

Satpal · Accepted Answer · 2019-07-16 11:59:03Z

You should pass the selector to .on() method instead of elements. As the elements are created dynamically hence $("button[name=removePair]") doesn't exists.

Use

removePair = "button[name=removePair]"

var removePair = "button[name=removePair]",
  tbody = $('tbody[name=tb-table]');


function DrawHtml(list) {
  var html = '';
  for (var i = 0; i < list; i++) {
    html += '<tr name="row-' + i + '">';
    html += '   <td>';
    html += '       <button name="removePair" data-index="' + i + '"  type="button">' + i + '</button>';
    html += '   </td>';
    html += '</tr>';
  }
  return html;
}

//Create HTML
tbody.html(DrawHtml(5));

$(tbody).on("click", removePair, function() {
  console.log($(this).text());
  console.log($(removePair).length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody name="tb-table"></tbody>
</table>

Jameel Ahmed Ansari · Accepted Answer · 2019-07-16 12:16:35Z

0

Rather than name attribute use class instead

$('body').on('click', '.btn-primary', function (e) {

        });

answered Jul 16, 2019 at 12:16

Jameel Ahmed Ansari

917 bronze badges

1 Comment

szkut Over a year ago

why it is important? I've done the opposite until now. when someone will be stylist in the future, I will know that he will not change the logic of creating a table. why not use name?

Collectives™ on Stack Overflow

dynamically created button and its own value

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related