Question

我正在尝试使用jQuery .load方法加载我的所有网站页面，这就是我网站的外观：

<script type="text/javascript">  
  $(function() {
    $('.link').bind('click', function(e) {
            var page = $(this).attr('href');
            $('#site').addClass('loading');
            $('#content').load(page, function (){
            $('#site').removeClass('loading');
    });

    e.preventDefault();
    return false;
  });

<a href="test.php" class="link">Test</a>

使用此代码，每个获得class =“link”的链接都会在div #content上加载我的页面。工作良好！没有问题但是当我加载test.php时，如果我在任何链接或按钮上使用class =“link”，或者其他什么，它就不起作用而且新页面被加载到我的#content之外。

已经尝试将其复制到新加载的文件中并且它不起作用，任何人都有提示？

由于

Answer 1

这是因为当你绑定一个事件时，它只会将它绑定到那时DOM中的元素。因此，如果您稍后添加新的，它们将不会受到您之前附加的事件的约束。假设你有jQuery 1.3，它有一个内置函数来绕过这个叫做live的函数。有了它，您可以将事件绑定到所有当前和未来元素。它不支持所有事件，但它支持click。

所以记住这一点，你只需要替换它：

$('.link').bind('click', function(e) {

有了这个：

$('a.link').live('click', function(e) {

（我将a。添加到选择器中，因为如果可能的话，指定标签会更有效率）

如果你没有jQuery 1.3，你应该尽快升级。如果你不能，请查看livequery插件，它实现了相同的功能，但却不那么优雅。或者，您可以简单地使用一个函数来绑定操作，并在每次加载新数据时调用它。但是，考虑到所有事情，jQuery的live是执行此操作的最佳方法。

Jquery AJAX加载问题

1 个答案: