Remove dynamically created elements even when using ON function

Question

THIS IS NOT A DUPLICATE FOR Event binding on dynamically created elements? as i'm already using the ON function, but it doesn't work :

I'm trying to delete dynamically created elements.

Everytime a user make a search, a tag with the keyword is added containing an X button to delete this tag (it's add to the .tags div) :

<div class="tags"></div>
<div class="all">
     <input type="search" class="searchfield" /> 
     <button class="searchbutton">add tag</button>
</div>

The problem is, when i click on the X button, the on("click" function is never executed! (i never get the alert) :

$( document ).ready(function() {

    $(".searchbutton").click(function(){
        addTag($(".searchfield").val());
    });
     $(".removeTag").on("click", function(){
        alert("yes");
    }); });

function addTag(search) {   $(".tags").append("<div class='tag'><span class='keyword'>" + search + "</span><button class='removeTag'>X</button></div>"); }

Check the demo here http://jsfiddle.net/vvuah6pf/1/ you have to make a search to see the added tag

I use jQuery 1.9.1

Thanks

It is an *exact* match for that question. You are using `on()`, yes, however you are not using the *delegated* version of it. The top answer in the question I linked to has all the information required to fix this issue. — Rory McCrossan, Feb 12 '15 at 15:55

score 1 · Answer 1 · answered Feb 12 '15 at 15:57

1

It is a duplicate

 $(document).on("click",".removeTag", function(){
    alert("yes");
});

here is your updated version: http://jsfiddle.net/vvuah6pf/3/

answered Feb 12 '15 at 15:57

Artūras

473
4
13

Remove dynamically created elements even when using ON function

1 Answers1