单击时事件不作为委派事件工作

On click event not working as a delegated event

本文关键字：事件 工作 委派 不作为 单击      更新时间：2023-09-26

我正在尝试将单击事件添加到

  • 中的 元素。
    加载页面时，事件添加正常，但是当我动态添加它时    （按下按钮）它不起作用。
    我读到问题是因为事件被处理而不是委托。
    我必须在函数中更改哪些内容才能委派事件？
    此外，我需要添加的    具有"删除附件"类。

    这是片段： 

    $(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>

    • 您也添加了 LI，因此委派给该 LI 是行不通的，您必须委托给实际存在的东西，例如 UL

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

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

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

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

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

    将其连接到ul、div或body。

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

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

    相关文章：