Jquery appended item click function not working

Question

Ok so I have a button that when someone clicks it appends some info to a 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 is all good work's fine.

But I also want all of this to remove() when I click <div class="clear-tile">X</div>.

and for that I am using:

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

But nothing happens no error nothing.

I also have similar function's in my file that use remove() and such which work fine. It's just anything that I try to trigger from .clear-tile just doesn't work at all.

I have a feeling it's down to me appending it but I'm not sure any help would be much appreciated

Learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) — Satpal, Jul 14 '15 at 15:51
You have a fresh DOM added with your script, so try to use jquery **on()** method instead of **click()**, to deal with new dom elements. — Zakaria Acharki, Jul 14 '15 at 15:52
@Satpal Hi can you maybe let me know what in that document helps me out thanks — , Jul 14 '15 at 15:53

score 2 · Accepted Answer · answered Jul 14 '15 at 15:51

2

You need to use event delegation:

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

Instead:

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

answered Jul 14 '15 at 15:51

lmgonzalves

6,331
3
18
39

That was it thank's a lot will accept as soon as it lets me – Jul 14 '15 at 15:56

Jquery appended item click function not working

1 Answers1