Jquery click event not firing on the element created dynamically using jquery

Question

I am trying to make a simple functionality where user selects some value from drop down and then clicks on the add button to add the selected item in the below div in the form of tag.

Each added tag has a remove anchor which when clicked removes the tag.

Now when clicked on add button the tags are being inserted correctly, But when I clicked on the remove button over tag, the click event is not firing.

However if I hard coded some tags with exact same markup as that of dynamically generated tags, the click event for remove tag is firing exact properly and the tag is being removed as I wanted.

HTML:

    <select id="ddlTagName">
    <option value="1">Tag One</option>
    <option value="2">Tag Two</option>
    <option value="3">Tag Three</option>
</select>
<input id="btnInsertTag" type="button" value="Add"/>
<br/>

<div id="TagsHolder">
  <span class="tag">
      <span>Tag One HardCoded </span>
      <a class="remove">X</a>
  </span>

  <span class="tag">
      <span>Tag Two HardCoded </span>
      <a class="remove">X</a>
  </span>
</div>

JS:

    $("#btnInsertTag").click(function () {
    var selectedTagText = $("#ddlTagName option:selected").text();
    var selectedTagValue = $('#ddlTagName').val();
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
    $("#TagsHolder").append(generateMarkup);
});

$(".remove").click(function () {
    alert('click event triggered');
    $(this).parent(".tag").remove();
});

My question is that why the click event is not firing for the dynamically generated tags.

Here is the Demo

Thanks in advance

Answer 1

Use even delegation instead

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

More info

$(document).on('click', '.remove', function () {.....

Answer 2

$("#btnInsertTag").on('click',  function () {
  var selectedTagText = $("#ddlTagName option:selected").text();
  var selectedTagValue = $('#ddlTagName').val();
  var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' +   selectedTagText + ' </span><a class="remove">X</a></span>';
  $("#TagsHolder").append(generateMarkup);
});
$(document).on('click', ".remove", function () {
       alert('click event triggered');
   $(this).parent(".tag").remove();
});

event binding will not work for dynamically generated elements. For this you need to bind to an element that exists at the moment that the JS runs (which is the document), and supply a selector in the second parameter to .on(). When a click occurs on document element jQuery checks whether it applied to a child of that element which matches the ".remove" selector.