Jquery 单击事件不会在使用 jquery 动态创建的元素上触发

我正在尝试创建一个简单的功能，用户从下拉列表中选择一些值，然后单击“添加”按钮以标签的形式在下面的 div 中添加所选项目。

每个添加的标签都有一个删除锚点，单击该锚点即可删除该标签。

现在，当单击添加按钮时，标签将被正确插入， 但是当我单击标签上的删除按钮时，单击事件没有触发。

但是，如果我使用与动态生成的标签完全相同的标记对一些标签进行硬编码，则删除标签的单击事件将完全正确地触发，并且标签将按照我的意愿被删除。

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();
});

我的问题是为什么点击事件不是为了动态生成的 tags.

这里是Demo http://jsfiddle.net/c7aGg/8/

提前致谢

使用偶数委托代替

事件委托允许我们将单个事件侦听器附加到 父元素，将为匹配选择器的所有子元素触发， 这些孩子现在存在还是将来添加。

更多信息 https://learn.jquery.com/events/event-delegation/

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