javascript - 动态创建的 anchor 链接未收到 'click' 事件？

Question

我正在使用 JS 创建下面的 HTML。 (这是一个 Bootstrap 下拉按钮)

<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 中工作，但那里的代码不是动态创建的 - 这是我认为的问题。

我在这里遗漏了什么非常明显的东西吗？

Answer 1

如果整个 HTML block 是动态的，那么您需要定位附加 HTML 的容器并使用 on

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