动态创建的锚链接未接收'单击'事件

Dynamically created anchor links not receiving 'click' events?

本文关键字：单击 事件 创建 链接 动态      更新时间：2023-09-26

我正在使用JS创建下面的HTML。（这是一个引导程序下拉按钮）

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle my-status" data-toggle="dropdown">
        Status <span class="caret"></span>
     </button>
     <ul class="dropdown-menu status-menu" role="menu">
         <li><a href="#" class="status" data-status-id="0">None</a></li>
     </ul>
</div>

在JQuery中，我试图处理点击里面的链接。

$('li').on('click', 'a.status', function(e) {
    e.preventDefault();
    alert("hi");
});

我已经尝试了大约6种不同的方式来选择这些链接，但我所做的似乎都没有抓住它

由于它们是动态创建的，我知道我需要使用"on"函数，但它似乎一点也不起作用。

我可以让它在JSFiddle中工作，但那里的代码不是动态创建的——我认为这就是问题所在。

是不是有什么愚蠢而明显的东西让我错过了？

如果整个HTML块都是动态的，那么您需要将HTML附加到的容器作为目标，并使用on

$(containerOfAppendedContent).on("click", ".btn-group li a", function() {

假设您发布的整个代码块是动态创建的，甚至只是列表，当您将事件绑定到动态添加的元素时，您需要在执行代码时绑定到DOM中已经存在的元素。尝试：

$(document).on('click', 'a.status', function(e) {
    e.preventDefault();
    alert("hi");
});

$(document)是最坏的情况，因此，如果您有一个元素更接近执行jQuery时动态添加的元素，请在文档上使用该元素。

确保您选择的是静态父级，因此如果li也是动态创建的，请使用其父级或其父级的父级

$('div.btn-group').on('click', 'ul li a.status', function(e) {
    e.preventDefault();
    alert("hi");
});

如果该div也是动态创建的，则可以转到body甚至document

$(document).on('click', 'ul li a.status', function(e) {
    e.preventDefault();
    alert("hi");
});

为什么不使用onclick函数生成ancor标记？

<li><a href="#" class="status" data-status-id="0" onclick="DoSomething();">None</a></li>
<script>
  function DoSomething(){
    // Do your work
  }
</script>

希望这能帮助

使用此将li更改为document

$(document).on('click', 'a.status', function(e) {
    e.preventDefault();
    alert("hi");
});
相关文章：