0

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

目前我的第一页是一个完整的 HTML 文档（带有链接和脚本元素 + 正文的头部），而第二页只包含 php 代码（没有html、head、body结构）。实际上，我将第二页视为“包含”在第一页中。

当我想在第二页中使用 jQuery UI显示这个滑块时，问题就来了。

我在第一页的 head 部分添加了 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>

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

  <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 文档，其中我在 head 部分中包含我的脚本和链接元素？

预先感谢您的帮助

4

2 回答 2

0

两个文档之间没有“继承”。遇到时执行 JavaScript 在您描述的两种情况下发生的情况是，当您在头部有 JS 时，它会在第二个页面的加载完成之前执行。偶然地，当您将其作为正文的一部分嵌入时，会加载第二页，并且在执行滑块特定代码之前将 html 插入到第一页的 dom 中，这是它的工作方式。

您需要将特定于滑块的代码包含到 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 作为第二页的一部分插入。

于 2012-12-07T12:24:51.567 回答
0

我的理解是，第一页的 Javascript 只会在该页面完成加载时知道 DOM 内容。

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

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

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

于 2012-12-07T12:16:14.273 回答