2

如果有人比我更了解 jQuery（可能 99% 在这里，因为这是我尝试此代码的第一周 :) 还剩下一些时间，这是一个我真的需要回答的问题。对不起，一些不正确的英语。

你们中的一些人可能已经阅读了我提出的关于将外部页面内容放入 div 和 UI 选择幻灯片元素的其他问题，这些元素在此类加载的 div 中正确加载，这是该主题的延续，现在我希望解决这个问题，我做在这里收集信息的新主题。主要问题是为什么 UI 滑块（选择元素）在通过 jQuery（在同一主页中）加载（从另一个页面中的 div）到 div 时不起作用。

这是我用来将内容加载到网站的代码：

load_script.js
$(document).ready(function(){
    $('#div_that_will_receive_content').load('from_page.html #from_div');
});

问题：问题以两种不同的方式出现。1：当仅加载DIV时，滑块显示，div中的所有内容都显示并且div加载正确，除了滑块。滑块在加载时显示 0.1 秒，然后消失。2：当整个网站加载（包括 ui 滑块）内容循环并且网站永远不会停止加载时，在浏览器控制台中检查时，25-30mb 会在几秒钟内加载。即使在这种情况下，滑块在加载时刻也可能仅显示 0.1 秒，并且由于站点的循环加载，滑块会闪烁。

Page_1.html

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
<script src="load_script.js" type="text/javascript"></script>

<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

<script>
$(function() {
    $( "#slider" ).slider();
});
</script>
</head>
<body>

<div id="div_1">DIV 1 = This is where the content of div_2 should be</div>

</body>
</html>

Page_2.html

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
 <script src="load_script.js" type="text/javascript"></script>

<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

<script>
$(function() {
    $( "#slider" ).slider();
});
</script>
 </head>
<body>

<div id="div_2">DIV 2 = This div containing a slide-select-element will be loaded to to     div_1</div>

</body>
</html>

load_script.js

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2 #div_2');
});
</script>

我对此仍有一些问题。现在的问题是，如果我将整个 Page2.html 加载到 Page1.html 中的 div 中，一切都会顺利进行。但是，如果我只是从 Page2.html 加载选定的 div，则幻灯片元素不会显示，但其余内容会显示（文本）。

这项工作和整个页面都被加载，包括滑块：

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2');
});
</script>

这不起作用，滑块不会显示，但其余内容会显示（文本）：

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2 #div_2');
});
</script>

有人知道这取决于什么吗？

4

1 回答 1

2

删除第二页上的所有脚本导入-您只需要加载一次-每次加载时load_script.js-它都会导致无限循环，因为那是您的加载函数所在的位置。然后您可以使用 .load() 的回调函数来初始化滑块。

$(document).ready(function(){
    $('#div_that_will_receive_content').load('from_page.html #from_div',function(){
         $( "#slider" ).slider();
    });
});

但是，如果您还独立使用该页面，那将破坏您的第 2 页。如果是这种情况，那么您只需要从 page2 中删除以下内容

<script src="load_script.js" type="text/javascript"></script>
于 2012-12-18T19:18:56.320 回答