jquery点击事件不会触发使用jquery动态创建的元素 [英] Jquery click event not firing on the element created dynamically using jquery

问题描述

我试图做一个简单的功能，用户从下拉菜单中选择一些值，然后点击添加按钮，以标签的形式在下面的div中添加选定的项目。

每个添加的标签都有一个移除锚点，当点击时移除该标签。

现在当点击添加按钮标签正确插入时，
但是，当我点击标签上的删除按钮时，点击事件不会触发。

然而，如果我使用与动态标记完全相同的标记生成的标签，移除标签的点击事件正确地发射并且标签正在被删除，正如我所希望的。

 < select id =ddlTagName> 
< option value =1>标签1< / option> 
< option value =2>标签2< / option> 
< option value =3>标签三< / option> 
< / select> 
< input id =btnInsertTagtype =buttonvalue =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 =tagdata-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（）; 
}）; 
  

我的问题是，为什么点击事件 strong>动态生成标记。

以下是 Demo a>

预先感谢 / p>

事件代理允许我们将一个事件侦听器附加到一个
父元素，该子元素将为所有匹配选择器的子元素触发，
这些孩子现在是否存在或将来是否添加。

更多信息

  $（document）.on（ 'click'，'.remove'，function（）{..... 
  

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

解决方案

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 () {.....

这篇关于jquery点击事件不会触发使用jquery动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！