0

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

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

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 上测试过了

谢谢。

4

2 回答 2

1

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

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

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

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

于 2012-10-03T07:25:58.820 回答
0

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

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

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

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

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

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

检查下面的链接。它会帮助你。尝试演示。

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

于 2012-10-03T07:34:33.550 回答