如果有人比我更了解 jQuery(可能是 99%,因为这是我尝试这段代码的第一周:) 还有一些时间,这里有一个我真的需要一些答案的问题。抱歉,有些英文不正确。
你们中的一些人可能已经阅读过我提出的关于将外部页面内容放入 div 和 UI 选择幻灯片元素中的其他问题,这些元素在此类加载的 div 中无法正确加载,这是该主题的延续,现在我希望解决这个问题我创建了一个新主题来收集此处的信息。主要问题是为什么 UI slider (选择元素)在通过 jQuery(在同一主页中)加载(从另一个页面中的 div)到 div 时不起作用。
这是我用来将内容加载到网站的代码:
load_script.js
$(document).ready(function(){
$('#div_that_will_receive_content').load('from_page.html #from_div');
});
问题:问题以两种不同的方式发生。 1:当仅加载 DIV 时, slider 不显示,div 中的所有内容都会显示,并且除 slider 之外的 div 加载正确。 slider 在加载时刻显示 0.1 秒,然后消失。 2:当整个网站加载(包括 ui slider )时,内容循环并且网站永远不会停止加载,在浏览器控制台中检查时,25-30mb 会在几秒钟内加载。即使在这种情况下, slider 在加载时刻也可能会显示 0.1 秒,并且由于站点的循环加载, slider 会闪烁。
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,则幻灯片元素不会显示,但其余内容会显示(文本)。
这项工作和整个页面都被加载,包括 slider :
<script>
$(document).ready(function(){
$('#div_1').load('Page_2');
});
</script>
这不起作用, slider 不会显示,但其余内容会显示(文本):
<script>
$(document).ready(function(){
$('#div_1').load('Page_2 #div_2');
});
</script>
有人知道这取决于什么吗?
最佳答案
删除第二页上的所有脚本导入 - 您只需要加载一次 - 而且每次加载 load_script.js
时 - 它都会导致无限循环,因为这就是您的加载函数所在的位置。然后您可以使用.load()的回调函数来初始化 slider 。
$(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>
关于java - 外部页面 div 加载时出现 jQuery 元素错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13939856/