Question

我正在将下面的元素添加到我的表格中。

正如您所看到的，当您按下+ - 按钮时，您会在表格下方插入一个新按钮Add Product2。

在下面找到我的最低范例：

＆＃13;

$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));

function clickDispatcherTable(e) {
  let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")

  if (plusButton.hasClass("product2")) {
    let plusButtonParent = plusButton[0].parentElement.parentElement;
    plusButtonParent.insertAdjacentHTML('afterend', `
    <tr>
      <td></td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
      </td>
    </tr>
            `)
  }
}

function ourClickDispatcher(e) {
  console.log("event")
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product2
                                        </button>
        <button type="button" class="btn btn-dark btn-sm product2">+</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

当我按下顶部的按钮时，我得到控制台输出event。当我按下按钮 - 由JQuery插入时，console.log event不会被触发。

为什么事件未正确加载的任何建议？

通过动态插入元素触发事件

0 个答案: