Я пытаюсь сделать простую функциональность, когда пользователь выбирает какое-то значение из раскрывающегося списка, а затем нажимает кнопку добавления, чтобы добавить выбранный элемент в нижеприведенный div в виде тега.
Каждый добавленный тег имеет привязку удаления, которая при нажатии удаляет тег.
Теперь при нажатии кнопки добавления теги устанавливаются правильно, Но когда я нажал кнопку "Удалить" над тегом, событие click не запускается.
Однако, если я жестко закодировал некоторые теги с такой же разметкой, что и для динамически генерируемых тегов, событие click для тега remove корректно выполняется, и тег удаляется по мере необходимости.
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();
});
Мой вопрос в том, почему событие click не работает для динамически генерируемых тегов.
Вот Демо
Заранее спасибо