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) => {
 ......
}
});