Javascript：onclick 用于动态创建的按钮

Question

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

...
outPut += 
  "<div class=\"col-lg-4 col-md-6 mb-4\">" +
    "<div class=\"card h-100\">"+
        "<a href=\"#\"><img class=\"card-img-top\" src=\"http://placehold.it/700x400\" style=\"height: 50%; width:50% \" alt=\"\"></a>"+
        "<div class=\"card-body\">"+
        "<h4 class=\"card-title\">"+
            "<a href=\"#\">"+ nome +"</a>"+
        "</h4>"+
        "<h5>"+ preco +"</h5>"+
        "<p class=\"card-text\">"+ descricao +"</p>"+
        "</div>"+
        "<div class=\"card-footer\" >"+
            "<button type=\"button\" class=\"btn btn-success-cart\" data-id=\"" + id + "\" data-nome=\"" + nome + "\" data-descricao=\"" + descricao + "\" data-preco=\"" + preco + "\">+ Carrinho</button>"+
        "</div>"+
    "</div>"+
  "</div>";
...
$("#divCards").html(outPut);

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

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

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

Answer 1

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

您需要绑定在执行代码.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();
});

Answer 2

我知道在这里回答有点晚了，但类似的情况发生在我身上，上面接受的答案有点奏效。 但它多次触发该事件，因为我的脚本包括调用该函数，该函数为不同的场合多次创建单击事件。 所以每次调用都会重复创建点击事件。 然后当用户单击按钮时，该函数将被多次调用。 因此我不得不关闭点击然后点击。 只需添加此答案，以便其他与我有相同问题的人可以获得帮助。

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