我正在尝试动态添加一个 html 片段,其中包含通过 jquery append('html') 方法命名的 anchor 和目的地
附加后所有命名链接都不起作用。新添加的内容在页面上可见,但链接不起作用。是因为这些标签是动态添加的,还是我在这里做错了什么?但是,所有服务器端生成的命名 anchor 都可以正常工作。
简化的 html:
<a href="#tab">Foo</a>
<div id="tab"></div>
("#testButton").click(function() {
$('#mainSegmentDiv').append("html")
});
最佳答案
附加 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()
.
关于jquery - 命名 anchor 不适用于动态 html 和 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9967013/