Why jQuery events doesn't work when I use a class generated with jQuery

Question

I have a problem. First I have this code with which I can generate a new element. This code as such is working fine.

$(document).ready(
    function() {
        $( ".addto" ).click(function() {
        var text = $(this).children(".textlink").text();
        html = '<li class="ui-state-default"><a href="#" class="delete"><i class="fa fa-trash" aria-hidden="true"></i></a> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + text + '</li>';
        $( "#sortable" ).append( html );
        });
});

If you can see, this code generates an html which is apended in the div "#sortable". That works fine. But not the next step: this code has a trash can icon, whose intention is when you click on it, you can delete the element. If I write this code in plain HTML it works, but when it comes about the html generated by jQuery, it doesn't work. This is the code i'm using to remove the elements.

$(document).ready(
    function() {
        $( ".delete" ).click(function() {
        $(this).parent().remove();
        });
});

Thanks

Please post with html. Better if you can share in something like jsfiddle. — Sajidur Rahman, Apr 06 '17 at 18:15
Thank you for your help. The code was posted below worked fine. — Alvaro López Sánchez, Apr 06 '17 at 18:31

score 0 · Accepted Answer · answered Apr 06 '17 at 18:13

0

I would add the listener to the document so it catches even not-yet-existing elements.

$(document).on('click', '.delete', function(e){
$(this).parent().remove();
})

answered Apr 06 '17 at 18:13

itamar

3,837
5
35
60

1

Yes, it works in this way. Thank you for your help. – Alvaro López Sánchez Apr 06 '17 at 18:27
No prob - don't forget to to mark the answer :-) – itamar Apr 06 '17 at 18:28

score -1 · Answer 2 · answered Apr 06 '17 at 18:15

When you're assigning the event handler, there are no elements to bind to. You're adding them later.

You'll have to bind the event to a container element, and use deferred events.

$('#container').on('click', '.delete', function() {
    // do delete stuff here
});

Why jQuery events doesn't work when I use a class generated with jQuery

2 Answers2