Jquery 页面头部的元素是如何被通过Ajax调用的第二个元素继承的？

我有两个HTML页面。第一个包含一个表单，该表单通过异步HTTP（Ajax）请求提交给第二个表单。这样，一旦用户提交表单，第二个页面就会显示在表单底部，而无需重新加载

目前，我的第一个页面是一个完整的HTML文档（头部带有链接和脚本元素+正文），而第二个页面只包含php代码（没有HTML、头部和正文结构）。实际上，我对待第二页的态度就像它被“包括”在第一页中一样

当我想在第二页中使用jQueryUI显示时，问题就出现了

我在第一页的标题部分添加了jQuery UI：

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    });
    </script>

$（函数（）{
$（“#滑块最大范围”）.滑块({
射程：“最大”，
民:1,，
最高：10，
价值：2，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
}
});
$（“金额”）.val（$（“滑块范围最大”）.slider（“值”）；
});

当我试图在第二页中显示滑块时，它没有正确显示。以下是我在正文部分使用的代码：

  <p>
    <label for="amount">Minimum number of bedrooms:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max"></div>

最少卧室数量：

但是，如果我在第一页的正文部分尝试相同的代码，它们将完美地显示出来

所以我的问题是。。。通过Ajax调用的第二个页面如何继承页面头部的链接和脚本元素

第二页是否也应该是一个完整的HTML文档，其中我在标题部分包含脚本和链接元素

---

提前感谢您的帮助

我的理解是，第一个页面的Javascript仅在该页面完成加载时才知道DOM内容

之后加载的新内容将无法识别

为了解决这个问题，您可以将第二个页面作为完整的HTML页面加载，包括所有标题和脚本等

或者，仍然将第二个页面作为当前拥有的部分页面加载，但只在部分页面顶部包含额外的“脚本”和“链接”部分，以确保它们应用于新加载的DOM内容的上下文。

这两个文档之间没有“继承”。JavaScript是在遇到问题时执行的。在您描述的两个场景中，当JS位于头部时，它会在第二个页面加载完成之前执行。当您将其作为主体的一部分嵌入时，第二个页面被加载，html被插入到第一个页面的dom中，然后执行特定于滑块的代码，这就是它的工作方式

您需要将特定于splider的代码包含到ajax调用的成功处理程序中。类似于下面的代码

$.ajax({
   url: urlOfSecondPage,
   success : function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    }
});

---

或者，将原始JS作为第二个页面的一部分插入。

需要查看将额外HTML加载到页面中的javascript/jQuery。这就是解决办法所在。