Question

我使用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种不同的方法来选择这些链接，但我所做的一切似乎都没有抓住它。

由于它们是动态创建的，因此我知道我需要使用＆＃39; on＆＃39;功能，但它似乎并没有起作用。

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

我在这里遗失了一些明显的蠢事吗？

Answer 1

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

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

$(document)是最糟糕的情况，所以如果你有一个元素更接近于jQuery执行时存在的动态添加的元素，那就用它来覆盖文档。

Answer 2

确保选择静态父级，因此如果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");
});

Answer 3

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

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

Answer 4

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

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

希望这有帮助

Answer 5

使用它将li更改为document

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

动态创建的锚点链接没有收到“点击”事件？

5 个答案: