javascript - Jquery appended item click function not working -

this question has answer here:

• event binding on dynamically created elements? 19 answers

ok have button when clicks appends info section.

like so:

function() {   $(".blend-tile").click(function() {      $(this).hide();     var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="infora"></div><div class="percent-mix"></div><div class="mix-value"></div></div></div><div class="clear-tile">x</div></li>');     $('#mixers').append(li);     $('.tpic', this).clone(true, true).contents().appendto(li.find('.color-img'));     $('.infora', this).clone(true, true).contents().appendto(li.find('.infora'));     if ($('#mixers li').length === 6) {       $(".tiles").hide();       $(".nomore").show();     }   }); }); 

which work's fine.

but want of remove() when click <div class="clear-tile">x</div>.

and using:

$(function() {   $(".clear-tile").click(function() {     $(this).parent().remove();   }); }); 

but nothing happens no error nothing.

i have similar function's in file use remove() , such work fine. it's try trigger .clear-tile doesn't work @ all.

i have feeling it's down me appending i'm not sure appreciated

you need use event delegation:

$("#mixers").on("click", ".clear-tile", function() {     $(this).parent().remove(); }); 

instead:

$(".clear-tile").click(function() {     $(this).parent().remove(); });