Question

我有这段代码：

$("#contantainer").load("some_page.txt");

在那some_page.txt我有这个：

        <div class="nav">
            <ul id="nav_ul">
              <li><a class="nav_a" href="#home" id="home">Home</a></li>
              <li><a class="nav_a" href="#page2" id="page2">Page 2</a></li>
            </ul>
        </div>

我希望<a class="nav_a" href="#page2" id="page2">Page 2</a>上有点击事件，并在<div id="container"></div>中加载不同的内容。问题是浏览器没有识别出发生了点击事件。我怎样才能实现目标？感谢。

Answer 1

您可以在容器上使用事件委派：

$('#container').on('click', '.nav_a', fn);

只要nav_a始终是容器的子容器，它就能工作。否则，选择包含所有nav_a的最近父级。这可以在页面加载或容器存在时绑定。

或者你可以在将它们添加到dom后绑定它们：

$("#container").load("some_page.txt", function() {
  $("#container .nav_a").on('click', fn);
});

确保只选择容器中的.nav_a以避免双重绑定页面上可能存在的任何其他.nav_a

Answer 2

您需要触发回调函数，该函数在加载数据时被触发

$("#container").load("some_page.txt", function() {
  $("#page2").click(function() {
    alert("link clicked");
  });
});

您无法在尚未加载的元素上绑定click事件，因此您首先拥有内容，然后将Click处理程序绑定到该元素。作为第二个参数传入.load（）的函数是一个回调函数，它在加载所有数据时运行。

如何将事件放在ajax .load -ed内容上？

2 个答案: