Question

我有一点问题，我希望你们中的一些人可以帮助我。

点击按钮后，我想用另一页的内容更新div。

让我们说homepage.html是这样的：

<html>
 <head>
  <script type="text/javascript" src="JQUERY.JS"></script>
  <script type="text/javascript">
   $(function()
   {
    $(".alert").click(function()
    {
     alert("HELLO");
     return false;
    });

    $(".load").click(function()
    {
     $("#content").load("FILE.HTML");
     return false;
    });
   });
  </script>
 </head>
 <body>
  <a href="#" class="load">CLICK ME</a>
  <div id="content"></div>
 </body>
</html>

一个相当简单的文件。

现在让我们说FILE.HTML只有这一行：

      <a href="#" class="alert">CLICK ME</a>

现在我要找的是：当我点击.alert时，弹出警告框。我不知道为什么不这样做。

所以我的问题是：为什么我的加载代码不受脚本影响？

感谢您的帮助。

Answer 1

您需要使用jQuery Delegate来实现...

Answer 2

当您将点击事件附加到file.html项目时，".alert"的内容不存在（当该代码运行时，实际上没有.alert个项目。）。

您需要使用jQuery的delegate或live方法，这些方法使用事件冒泡，以便不仅从现有元素捕获事件，还从插入的新元素捕获事件DOM后来。

这也有很好的副作用，即每个.alert元素只使用一个事件处理程序而不是一个。

Answer 3

您必须使用$.live：

$(".alert").live('click', function()
  {
    alert("HELLO");
    return false;
  });

您不必等到添加动态内容后，此函数会将您的事件处理程序应用于与您的选择器匹配的所有未来元素。

JQuery：如何在一些动态加载的内容上扩展脚本？

3 个答案: