命名锚不适用于动态html和jquery

Question

我正在尝试动态添加一个HTML片段，其中包含通过jquery append（'html'）方法命名的锚点和目标

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

简化的html：

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

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

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

Answer 1

附加有JavaScript的锚点应作为锚点起作用（因为单击锚点应将您带到其href属性中指定的任何位置），但是如果您尝试使用标记名id或class选择它们，它们将不会起作用'，因为绑定事件处理程序时它们不在DOM中：

JS Fiddle演示（演示非工作代码）。

没有您的HTML或您在做什么的特定知识，我只能向您提供以下建议：

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

JS Fiddle演示（演示工作代码）。

该on()方法将click事件（在这种情况下）附加到body元素上，并依靠事件传播来起作用，因为单击会冒泡到body，然后计算出它的来源以及是否与给定的选择器匹配（a在这种情况下，您可以使用id，class或任何有效的jQuery选择器）。如果与选择器匹配，则执行事件/功能（在这种情况下为// do something注释）。

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

参考文献：

• on()。