Question

我按照我在互联网上找到的方式动态创建一个按钮：

$(".btn-success-cart").click(function(event){
   event.preventDefault();
   var _id = Number( $(this).attr("data-id") );
   var _nome = $(this).attr("data-nome");
   var _descricao = $(this).attr("data-descricao");
   var _preco = Number( $(this).attr("data-preco") );
   console.log("Item add");
   addItem(_id, _nome, _descricao, _preco, 1);
   updateCart();
});

并暗示以这种方式点击每一个的方法：

<input
  type="file"
  id="activity-file-input"
  onclick="this.value = null"
  [disabled]="isLoadingModal"
  (change)="selectFile(activityFileInput.files[0])"
  #activityFileInput
  hidden>

但是当我点击生成的按钮时没有任何反应。

Answer 1

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）
时存在

您需要绑定代码$('#divCards').on('click', '.btn-success-cart', function(event){ event.preventDefault(); var _id = Number( $(this).attr("data-id") ); var _nome = $(this).attr("data-nome"); var _descricao = $(this).attr("data-descricao"); var _preco = Number( $(this).attr("data-preco") ); console.log("Item add"); addItem(_id, _nome, _descricao, _preco, 1); updateCart(); });正在执行时存在的静态元素。使用事件委托：

{{1}}

Answer 2

我知道现在回答这个问题有点晚了，但是类似的情况发生在我身上，并且上面接受的答案确实可以解决。但是它会多次触发该事件，因为我的脚本包含了调用该函数的功能，该函数会在不同情况下多次创建click事件。因此，每个调用都会重复创建click事件。然后，当用户单击按钮时，该函数将被多次调用。因此，我必须先单击然后单击。只需添加此答案，以使其他任何与我有相同问题的人都可以得到帮助。

('#divCards').off('click', '.btn-success-cart').on('click', '.btn-success-cart', (event) => {
 ......
}
});

Javascript：onclick动态创建按钮

2 个答案: