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

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .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) => {
 ......
}
});

Javascript: 动态创建按钮的onclick

Javascript: onclick for dynamically created button

javascript

jquery

onclick

buttonclick