java - 外部页面 div 加载时出现 jQuery 元素错误

标签 java javascript ajax jquery

如果有人比我更了解 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/

相关文章:

删除两个索引时的Java ConcurrentModificationException,当前索引和随机索引

java - 8皇后没有8皇后全食宿需要重启

javascript - 如何读取前端发送的JSON字符串

javascript - Extjs - 组合框提交值

ajax - meteor 服务器端ajax

java - 填充矩形 - 绘画方法 (MIDP)

java - 将多个 JSON 对象从一个文件转换为一个 XML 文件,其中包含与 JSON 一样多的元素

javascript - 使用 addEventListener 附加时不调用事件

mysql - 使用 AJAX 过滤从数据库生成的 HTML 表的行

javascript - 在另一个 .js 文件中调用 js 函数