jquery多个加载到div

我想做一个页面有4个可配置的部分，所有这些将提供用户相同的输入，但最终是4个独特的配置设置。jquery多个加载到div

我正在使用一个通用的基本页面来做到这一点，但遇到了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

谢谢。

来源

2012-10-03 Dizzle

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

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

，如果你可以改变的test2.html删除所有脚本和身体部位，并确保你只包括什么是需要。

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

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

你这个关键字，而不是专门说div的名称。它将允许你获得输入改变的div。

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

希望这会帮助你。如果您有任何问题，请不要犹豫，问。

来源

2012-10-03 07:34:33 Techie

这看起来像我们的首选解决方案，谢谢我现在就试用它。 – Dizzle

不要忘记把它作为答案，如果这可以帮助你。只是提醒，因为你是新的stackoverflow – Techie

对不起，它需要一段时间接受:) – Dizzle

首先，你不应该在jQuery的load（）方法中使用完整的HTML文档。你应该只有div的内容。例如。没有文档类型，没有html或body标签。只是身体本身。其次：元素标识符在任何页面上都应该是唯一的。当你加载第一个div的内容时，它会创建一个id = testing的div元素。当您第二次加载它时，它会尝试创建它的另一个副本，但具有相同的标识符。

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

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

来源

2012-10-03 07:25:58 nagylzs

嗨，感谢您的回复，这是我们将考虑的事情。 – Dizzle

jquery多个加载到div

回答

相关问题