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');
});

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mark Baijens, Jul 24 '19 at 08:36
it worked, but why it wasn't working with the buttons container? Now it will listen all clicks on the page, it isn't wrong for performance? — Giuseppe De Paola, Jul 24 '19 at 08:37
If you're adding elements which need to have an event - you'll need to register the click event after you've appended the new element. — JRK, Jul 24 '19 at 08:37
change `$(".categoria").on('click', function() {...` to `$(".sortable-categorie").on('click','.categoria',function(){.....})`. Provided `.sortable-categorie` is present in the DOM on initial load & was not inserted dynamically. — techie_28, Jul 24 '19 at 08:43

score 1 · Answer 1 · answered Jul 24 '19 at 08:46

1

Try this

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

answered Jul 24 '19 at 08:46

Ravi

1,312
10
18

score 0 · Answer 2 · answered Jul 24 '19 at 08:45

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

score -1 · Accepted Answer · answered Jul 24 '19 at 08:39

-1

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.

answered Jul 24 '19 at 08:39

Ma G.

62
1
8

Jquery not detect click after append of element

3 Answers3