Question

我正在尝试将点击事件添加到＆lt; a＆gt; ＆lt; li＆gt;内的元素。
当页面加载时，事件被正确添加，但是当我动态添加它时，另一个＆lt; a＆gt; （按一个按钮）它不工作。
我读到问题是因为事件被处理而没有委托。
我需要更改我的功能以获得委托的事件吗？
我还需要添加的＆lt; a＆gt;有“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

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

实际上，事件一直在冒泡，直到找到最终捕获它的处理程序。所以你可以把它放在任何地方＆＃34;以上＆＃34;你的元素（原则上）。

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

您需要将事件附加到其父项（已存在），以便在li上触发事件时，它会冒泡到父项，捕获并执行。

将其附加到ul，div或body。

Answer 3

我认为这是一个很好的解决方案：

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

点击事件不作为委派事件

3 个答案: