相关疑难解决方法(0)

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

每个添加的标记都有一个删除锚点,单击它时会删除标记.

现在,当点击添加按钮时,正确插入了标签,但是当我点击标签上的删除按钮时,点击事件未触发.

但是,如果我使用与动态生成的标记完全相同的标记对某些标记进行硬编码,则删除标记的click事件会正确触发,并且标记将按照我的意愿删除.

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'); …