Question

我有一个母版页，根据点击的链接将内容加载到div中。我这样做是通过使用jQuery为某些锚点添加点击处理程序：

<div id="nav">
  <a href="somepage.html">
  ...
</div>

<div id="content"/>

<script type="text/javascript">
  $(document).ready(function() {
    $('#nav a, #footer a').click(function(e) {
      $('#content').load($(this).attr('href'));
      return false;
    });
  });
</script>

加载到#content中的一些页面也有我想要添加点击处理程序的锚点（因此这些点击的结果也会进入#content）。我试过这个：

$('#content a').click(function(e) {
  ...
});

但这似乎不起作用。有关如何在这些已加载页面中的锚点上设置点击处理程序的任何想法吗？

Answer 1

$(document).on('click', '#content a', function(e) {
  ...
});

应该有效。在动态添加元素时，您需要使用on()将它们绑定到事件。来自文档：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用时页面上。上（）。为确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。如果新的HTML被注入到页面，选择元素并在新HTML后附加事件处理程序被放入页面。

理想情况下，您希望DOM中的父元素比document更接近。

Answer 2

尝试：

$('#content').on("click", "a", function(e) {
    ...
});

在加载的页面中更改jQuery单击处理程序锚点

2 个答案: