就我所知，只有加载到DOM中的对象才可以用选择器操作，这在下面的示例中得到了说明。当按钮被点击时，它的点击处理程序试图在页面中选择一个元素并将其更改为html，但没有成功。我推测，由于点击处理程序是在链接页面加载到DOM之前触发的，因此选择器不会“t影响元素。
我的问题是，有没有办法示例化外部的html块，并在将其插入DOM之前对其进行操作。
脚本_1.js：
$(document).ready(function () {
$("#testButton").click(function () {
$("#externalPageDiv").html("hello world");
});
});外部页面html：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="script_1.js"></script>
</head>
<body>
<div data-role="page" id="externalPage" data-add-back-btn="true">
<div data-role="content" id="externalPageContent">
<div id="externalPageDiv"></div>external page</div>
</div>
</body>主页Html：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="script_1.js"></script>
</head>
<body>
<div data-role="page" id="internalPage_1" data-add-back-btn="true">
<div data-role="content" id="internalPageContent_1">
<a href="externalPage.html" id="testButton" data-role="button" rel="external">Page Change</a>
</div>
</div>
<div data-role="page" id="mainPage" data-add-back-btn="true">
<div data-role="content" id="mainPageContent">Main Page</div>
</div>
</body>
3条答案
按热度按时间rjjhvcjd1#
I'm correcting my incorrect comment.Yes, you can do something like this, but reading the jQuery documentation, it is said that the code is inserted in the DOM http://api.jquery.com/jQuery/#jQuery2. So, even the code below seems to not insert nothing in the DOM, it is indeed inserted.
试试这个：
js小键盘：http://jsfiddle.net/davidbuzatto/me7T3/
要从外部文件插入代码，可以使用load函数。您可以在此处看到一个示例：http://jsfiddle.net/davidbuzatto/zuFsc/请注意，在本例中，我使用了echo服务os jsFiddle来模拟外部文件。
dy1byipe2#
您可以使用javascript手动创建不插入DOM层次结构的DOM元素，并且在将它们插入DOM之前，可以根据需要对它们进行任意操作。
但是，如果你试图在页面HTML被解析之前操作由页面HTML创建的DOM元素，你就不能这么做了。DOM元素在那个时候不存在，所以没有什么可以操作的，除非你按照第一段所述手动创建它们。
一些操作仅对插入到DOM层次结构中的DOM元素起作用，例如
document.getElementById()，但是其他方法可以用于不在主层次结构中的DOM片段，例如item.getElementsByClassName()，其中item是不在DOM层次结构中的DOM元素。在jQuery中，默认的上下文是文档，因此像
$(".foo")这样的简单选择器操作将只搜索DOM文档层次结构中的DOM元素，但是，如果您传递一个特定的上下文$(".foo", item)，那么jQuery选择器将搜索该上下文，而不是主文档。kcugc4gi3#
使用
template标记也是一个很好的解决方案，如this answer中所述，更多信息see here