据我所知，只有加载到 DOM 中的对象才能使用选择器进行操作。这在下面的示例中进行了说明，当单击按钮时，它的单击处理程序未成功尝试在页面中选择要加载的元素并更改它之前的 html。我推测因为在链接页面加载到 DOM 之前触发了点击处理程序，所以选择器不会影响该元素。
我的问题是，有没有什么方法可以实例化外部 html block 并在将其插入 DOM 之前对其进行操作。
script_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>
最佳答案
我正在纠正我不正确的评论。 是的，你可以做这样的事情，但是阅读 jQuery 文档，据说代码被插入到 DOM 中 http://api.jquery.com/jQuery/#jQuery2 .所以，即使是下面的代码似乎也没有在 DOM 中插入任何内容，但它确实被插入了。
试试这个:
var codeToProcess = "<div>" +
" <div id='myDiv1'>a</div>" +
" <div id='myDiv2'>b</div>" +
" <div id='myDiv3'>c</div>" +
"</div>";
var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );
// getting by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null, since the divs
// were not yet added to the document
$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );
// getting by id after insertion
alert( $( "#myDiv2" ).html() );
jsFiddle:http://jsfiddle.net/davidbuzatto/me7T3/
编辑:
要从外部文件插入代码，可以使用加载函数。您可以在此处查看示例:http://jsfiddle.net/davidbuzatto/zuFsc/请注意，在此示例中，我使用了 echo 服务 os jsFiddle 来模拟外部文件。看这里How do you output a view file as an ajax response in Java?在这里 http://api.jquery.com/load/
关于jQuery:选择和操作 DOM 外部的 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11813691/