据我所知,只有已经加载到DOM中的对象才能使用选择器进行操作。这在下面的示例中说明,当点击按钮时,它的点击处理程序未成功尝试选择要加载的页面中的元素,然后更改它的HTML。我猜想,因为在链接页面加载到DOM之前触发点击处理程序,选择器不会影响元素。
我的问题是,是否有任何方法来实例化一个外部的html块,然后在将其插入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/