追加元素后，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&nbsp;。

Answer 2

试试这个$(document).on('click',".your_class_name", function() {//to delegate the click I applied this event to "add product" button's container});