Насколько я могу судить, только объекты, которые были загружены в 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="#" onclick="location.href='http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css'; return false;"
/>
<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="#" onclick="location.href='http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css'; return false;"
/>
<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>