Question

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

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

test.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">
$(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

上测试了这个

感谢。

Answer 1

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

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

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

替代解决方案是使用ajax（）加载内容，然后从Javascript代码替换标识符，最后调用$（“＃div1”）。html（replacement_html_content）。但如果我是你，我就不会这样做。使用服务器端脚本并改为提供查询参数。

Answer 2

如果您无法对test2.html进行更改，则可以使用如下代码。下面的代码只会抓取你元素的正文部分。

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

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

或者如果你可以放一个包含你想要的HTML部分的包装器，那就更好了。那么你可以得到这样的特定div。

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

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

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

希望这会帮助你。如果您有任何疑问，请随时提出。

Jquery多次加载到div中

2 个答案: