追加元素后，Jquery 未检测到单击

Question

我已经使用 html5sortable 库制作了一个可排序列表，其中用户有一个类别，可以在其中添加产品，也可以在添加产品的位置添加其他类别。第一个类别已经显示，添加产品时工作正常，但如果我添加另一个类别，我无法在此类别上添加产品。我尝试过使用“on”方法而不是“click”，因为它应该适用于动态创建的元素，但我认为我以错误的方式使用它。这是 HTML<div class="container-categorie">    //THIS IS A CATEGORY ITEM, WITH ADD PRODUCT BUTTON INSIDE    <div class="category" id="categoria-1">         <input type="text" class="input-categoria" placeholder="NAME CATEGORY" autofocus="autofocus">        <div class="list" id="list-1">        //products will be added here        </div>        <div class="item-products add-product-container">            <div align="center" class="add-product-btn" id="addproduct-1">            + add product            </div>        </div>    </div>    //END OF CATEGORY ITEM    <div class="add-categoria-container">    Nuova categoria    </div></div>这是js代码：var i = 2;$(".categoria").on('click', function() {//to delegate the click I applied this event to "add product" button's container});//This add a product inside category div$(".add-product-btn").click(function() {        var id_btn = $(this).attr("id");        var single_id = id_btn.substring(id_btn.indexOf("-") + 1);        $("#list-"+single_id).append('<div class="item-products">prova</div>');        sortable('.list');});//This should add a new category inside "container-categorie", with an "add product"//button inside, to add products inside this new category$(".add-categoria-container").click(function() {        $(".sortable-categorie").append('<div class="categoria"><input type="text" class="input-categoria" placeholder="NOME CATEGORIA PRODOTTI" autofocus="autofocus"><div class="list" id="list-'+i+'"></div><div class="item-products add-product-container"><div align="center" class="add-product-btn" id="addproduct-'+i+'">+ Aggiungi prodotto</div></div></div>');        sortable('.sortable-categorie');});

Answer 1

JQuery 没有像 Angular 或 React 那样的虚拟 DOM。这意味着 JQ 无法“看到”动态生成的元素。您可以做的是onclick="functionYouWantToTrigger(someParameters)"直接在 HTML 标签中使用 a 。

Answer 2

试试这个

$(document).on('click',".your_class_name", function() {

//to delegate the click I applied this event to "add product" button's container

});