Trigger doesn’t work for dynamic content added on .change jQuery

Question

I append some HTML dynamically, once an <input> field has changed. When I click on <a href="" class="js-remove-item"> link I want to remove that item. Yet the trigger for that link doesn't happen.

I tried adding the class name .tvshow of the <input> to the data handler like so:

From this:

$('.js-remove-item').on('click touchstart', function() {

to this:

$('.js-remove-item').on('click touchstart', '.tvshow', function() {

Yet, it's not working. What is going on?

Check the demo: http://jsfiddle.net/7tGCh/ (try typing something in the input and blur it, then click on link to remove that item)

Answer 1

The element is inserted dynamically, so you'll need to delegate the event :

$('.container__list-of-movies').on('click touchstart', '.js-remove-item', function() {
  $(this).parent().addClass('remove-tv-show');
  window.setTimeout(function() {$('.remove-tv-show').remove();}, 500);

  alert('removing');
  return false
})

FIDDLE