Jquery多次加载到div中

Posted 2023-05-09

技术标签:

【中文标题】Jquery多次加载到div中【英文标题】：Jquery multiple load into divs 【发布时间】：2012-09-24 02:14:35 【问题描述】：

我正在尝试制作一个包含 4 个可配置部分的页面，所有这些部分都将为用户提供相同的输入，但最终是 4 个独特的配置设置。

我正在使用通用基本页面来执行此操作，但遇到了问题，即 Jquery 选择器无法区分不同 div 内的部分之间的区别，但所有部分都来自同一页面。起初我认为这是特定于实现的，因此创建了一个较小的测试页面，但最终似乎遇到了同样的问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () 

    $('#div1').load("test2.html");
    $('#div2').load("test2.html");
);
</script>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

test2.html如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
function testing()

    alert("Alert: " + $('#test').val());

</script>
<div id="testing">
<input id="test" onchange="testing()"></input>
</div>
</body>
</html>

如果这不是执行此操作的正确方法，那将是更好的方法，我知道我可能会使用 iframe，但我是否能够从包含其他内容的页面中的输入框中访问值。

我已经在 ubuntu firefox 15.0.1 上测试过了

谢谢。

【问题讨论】：

【参考方案1】：

首先，您不应该使用带有 jQuery 的 load() 方法的完整 HTML 文档。您应该只有 div 里面的内容。例如。没有 doctype，没有 html 或 body 标签。只是身体本身。

其次：元素标识符在任何页面上都应该是唯一的。当您加载第一个 div 的内容时，它会创建一个 id=testing 的 div 元素。当您第二次加载它时，它会尝试创建它的另一个副本，但具有相同的标识符。

标识符必须是唯一的。（这就是他们识别的方式......）

另一种解决方案是使用 ajax() 加载内容，然后从 Javascript 代码中替换标识符，最后调用 $("#div1").html(replaced_html_content)。但如果我是你，我不会那样做。改用服务器端脚本并提供查询参数。

【讨论】：

【参考方案2】：

s如果您无法更改 test2.html，您可以使用如下代码。下面的代码只会抓取元素的主体部分。

$('#div1').load('test2.html body');

如果您可以对 test2.html 进行更改，请删除所有脚本和正文部分，并确保您只包含了需要的内容。

或者如果你可以放置一个包含你想要的 HTML 部分的包装器会更好。那么你可以像这样获取特定的div。

$('#div1').load('test2.html #container');

你这个关键字而不是专门说 div 名称。它将允许您获取输入已更改的 div。

查看以下链接。它会帮助你。 TRY DEMO.

希望这对您有所帮助。如果您有任何问题，请随时提出。

【讨论】：

这看起来像是我们的首选解决方案，谢谢，我现在就试试。如果对您有帮助，请不要忘记将其作为答案。提醒一下，因为你是新的 ***

以上是关于Jquery多次加载到div中的主要内容，如果未能解决你的问题，请参考以下文章

jquery load()重复加载，多次加载 js 和css问题的解决办法

使用jquery将html字符串加载到div中

使用 jQuery 将 HTML 页面动态加载到 div 中

如何使用 ajax 加载将 jquery 手风琴加载到 div 中？

通过 JQuery .load 将多个文件加载到一个 div 中？

如何使用 ajax 调用将 jquery 数据表加载到 div 中