单击事件不能作为委托事件

Question

我试图将点击事件添加到<li>内的<a>元素中。
加载页面时，该事件会很好地添加，但是当我动态添加该事件时，另一个<a>（按一个按钮）将无法正常工作。
我读到问题是因为事件已处理而不是委托。
为了使事件得到委托，我必须更改什么功能？
我还需要添加的<a>具有类“ deleteAttachment”。

这是代码段：

 $(document).ready(function(){ var a = 0; $('button[data-button="attachment"]').on("click",function () { var ul = $(this).next("ul"); var li = ul.find("li:last-child"); var element ="<li name='li3'>"; element += '<a class="deleteAttachment">' + a + '</a></li>'; li.before(element); a++; }); $('li').on("click", 'a.deleteAttachment', function () { alert("click"); }); });

 <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div> <button name="Button1" data-button="attachment"> button1 </button> <ul name="ulbuton1"> <li name="li3"> <a class="deleteAttachment">a</a> </li> </ul> <button name="Button2" data-button="attachment"> button2 </button> <ul name="ulbuton2"> <li name="li3"> <a class="deleteAttachment">b</a> </li> </ul> <button name="Button3" data-button="attachment"> button3 </button> <ul name="ulbuton3"> <li name="li3"> <a class="deleteAttachment">c</a> </li> </ul> </div> </body> </html>

Answer 1

您还添加了LI，因此委派该委托将不起作用，您必须委托给实际存在的东西，例如UL

$('ul').on("click", 'li a.deleteAttachment', function () {
      alert("click");
});

Answer 2

事件委托意味着您将事件处理程序添加到父级而不是其子级，这样，无论需要处理某种事件的子级数量如何，该事件只有一个处理程序（在父级）。

实际上，事件一直持续冒泡，直到找到最终捕获该事件的处理程序。 因此，您可以将其放置在元素“上方”的任何位置（原则上）。

在您的情况下，您要将事件附加到li ，在这种情况下，该li应该是孩子。

您需要将事件附加到它应该已经存在的父事件上，以便在li上触发事件时，事件会冒泡传给父事件，并被捕获并执行。

将其附加到ul ， div或body 。

Answer 3

我认为这是解决您的问题的好方法：

 $( "body" ).delegate( "a.deleteAttachment", "click", function() { //do your stuff here });

单击事件不能作为委托事件

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-02-26 15:31:31

解决方案2
1 2016-02-26 15:38:16

解决方案3
0 2016-02-26 15:38:46

单击事件不能作为委托事件

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-02-26 15:31:31

解决方案2 1 2016-02-26 15:38:16

解决方案3 0 2016-02-26 15:38:46

解决方案1
4 已采纳 2016-02-26 15:31:31

解决方案2
1 2016-02-26 15:38:16

解决方案3
0 2016-02-26 15:38:46