jquery - 命名 anchor 不适用于动态 html 和 jquery

Question

我正在尝试动态添加一个 html 片段，其中包含通过 jquery append('html') 方法命名的 anchor 和目的地

附加后所有命名链接都不起作用。新添加的内容在页面上可见，但链接不起作用。是因为这些标签是动态添加的，还是我在这里做错了什么？但是，所有服务器端生成的命名 anchor 都可以正常工作。

简化的 html:

<a href="#tab">Foo</a>

<div id="tab"></div>

("#testButton").click(function() {
   $('#mainSegmentDiv').append("html")
});

Answer 1

附加 JavaScript 的 anchor 应该作为 anchor (点击它们应该将您带到其 href 属性中指定的任何位置) ，但是如果您尝试使用标记名称、id 或 class 来选择它们，它们将无法“工作”，因为它们不存在于绑定(bind)事件处理程序时的 DOM:

JS Fiddle demo (demonstrates non-working code) .

由于不具体了解您的 HTML 或您正在执行的操作，我只能向您提供以下建议:

$('body').on('click','a',function(){
    // do something
});

JS Fiddle demo (demonstrates working code) .

on() 方法将 click 事件(在本例中)附加到 body 元素，并依赖事件传播来工作，因为点击会冒泡到 body，然后计算出它来自哪里，以及它是否与给定的选择器匹配(在本例中为 a，您可以使用 id、class 或任何有效的 jQuery 选择器)。如果它与选择器匹配，则执行事件/函数(在本例中为 //do some 注释)。

理想情况下，您可以使用与稍后添加到事件绑定(bind)时存在的 DOM 的元素最接近的父元素，而不是使用 $('body') (通常是$(document).ready())。

引用文献:

• on() .