Jquery not detect click after append of element

Question

i've made a sortable list with html5sortable library, where user have a category, where can add products inside, and can add other categories where to add products too.

The first one category is already displayed, and work fine when adding products, but if I add another category I can't add product on this category.

I've tried with "on" method instead of "click", as it should work on element created dinamically, but I think I'm using it in the wrong way.

Here is the 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>

And here is the js code:

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 can't listen to dynamically generated Elements directly, what you can do is you can provide parent element which is already there in DOM listen to them.

$("element which is already in DOM").on('click',"element to listen to", function() {
    //Code here
});

$(".container-categorie").on('click',".categoria", function() {
//Code here
});

or you can directly listen to the body instead, but it is not preferable.

For Ref : https://api.jquery.com/on/#on-events-selector-data-handler

Answer 2

Try this

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

Answer 3

JQuery has no virtual DOM like Angular or React. That means JQ can't "see" the dynamically generated element. What you can do is using a onclick="functionYouWantToTrigger(someParameters)" directly in the HTML tag.