【问题标题】：jQuery load broken?jQuery 加载坏了？
【发布时间】：2014-05-30 07:19:18
【问题描述】：

所以我在 jQuery 上注意到，当他们替换 .html() 时，甚至他们的示例都不能正常工作。我试图帮助用户解决 AJAX 问题，但突然间 AJAX 在我的测试页面和他的示例中都没有表现。事实上，无论是通过$('#feedback').load() 设置还是使用函数附加数据，它都不会添加对#feedback 的响应！但是，如果您提醒数据，果然，您拥有整个页面（也是另一个问题，因为我们应该只抓取正文！）

jQuery 发生了什么？

触发页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $('#button').click(function () {
                    $('#feedback').load('test.htm #body', function(data){
                        alert(data);
                        $('#feedback').html(data); // Append again... y u no work!?

                    });
                });
            });
        </script>
    </head>

    <body>
        <input id="button" type="submit" value="Go" />
        <div id="feedback">Welcome</div>
    </body>

</html>

测试页test.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body id="body">
        Welcome again <label id="var_name" name="callBack_data" />
  </body>
</html>

此操作的结果将alert() 整个页面 而不仅仅是正文。它也不会将数据附加到 div。

通过将按钮类型更改为type="button"，我们可以将一些数据加载到 div，但是没有正确的选择。

更新了可以工作的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $('#button').click(function () {
                    $('#feedback').load('test.htm #body');
                });
            });
        </script>
    </head>

    <body>
        <input id="button" type="button" value="Go" />
        <div id="feedback">Welcome</div>
    </body>

</html>

测试页更新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body>
        <div id="body">
            Welcome again <label id="var_name" name="callBack_data" />
        </div>
  </body>
</html>

【问题讨论】：

您不是在追加，而是在替换 HTML。在这种情况下，您将 #feedback 的 HTML 替换为请求的整个页面，而不是加载请求中指定的位。

标签： jquery ajax jquery-selectors jquery-load

【解决方案1】：

.load 已经做了 .html 部分，你不需要自己做。

$('#feedback').load('test.htm #body');

此外，<body> 在您执行 $("<div>").html("<body></body>") 时会被删除，因此通过 id 定位它是行不通的。使用 id="body" 将文本包装在 div 中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
  <body>
    <div id="body">
        Welcome again <label id="var_name" name="callBack_data" />
    </div>
  </body>
</html>

这将导致

<div id="feedback">
    Welcome again <label id="var_name" name="callBack_data" />
</div>

将显示为：

再次欢迎

【讨论】：

重点是，事实并非如此。请尝试代码或阅读我的解释。
实际上 load() 的工作方式与@JordanThompson 的预期一样。你需要看看这些东西是如何工作的。
@JayBlanchard 不，不是。它不委托#body 也不将HTML 输入到div。 See their documentation 您甚至不会注意到他们的“将主页的页脚导航加载到有序列表中”。正在工作
演示不起作用，因为它是为与旧的 api 站点一起工作而编写的，新的没有被引用的元素。（有人应该对此进行错误报告）
@KevinB 解释了很多。我提交了需要更新的页面。