Question

如何获得data-index的点击按钮：

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

我知道在动态添加的按钮上添加事件的唯一方法是将其附加到父级（tbody），并通过动态创建的按钮removePair触发，但是我不知道如何获得点击removePair以获得进一步的逻辑。

this返回tbody而不是removePair

谢谢！

Answer 1

您应该将选择器而不是元素传递给.on()方法。由于元素是动态创建的，因此$("button[name=removePair]")不存在。

使用

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>

Answer 2

不是使用name属性，而是使用class

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

        });

动态创建的按钮及其自身的价值

2 个答案: