Включение внешнего HTML на страницу jQuery Mobile

Я пытаюсь динамически включить внешний источник HTML в мобильную страницу jQuery. Я могу успешно включить внешний html, но он выглядит как обычный HTML (то есть не hqml, затронутый мобильным jQuery). Кто-нибудь может подсказать, что я могу делать не так?

Основной HTML:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <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://jqueryui.com/ui/jquery-1.7.1.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>
        $(document).ready(function () {
            $("#main").load('externalHtml.html');
            //$("#main").append('externalHtml.html');
            //$("#main").load('externalHtml.html #contain');
            //$("#main").page();
        });
    </script>
</head>

<body>
    <div data-role="content">
        <div id="main"></div>Main Page</div>
</body>

externalHtml.html:

<html>
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <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://jqueryui.com/ui/jquery-1.7.1.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
 </head>
<body>
external html
<div data-role="content" id="contain">
<input  type="search" name="name" id="name" value="" />
 </div>
      </body>
      </html>
Источник

1 ответ

Решение

Если ты .trigger('create') в элементе контейнера jQuery Mobile автоматически инициализирует любой виджет внутри контейнера. Например:

$("#main").load('externalHtml.html').trigger('create');

Они действительно должны лучше документировать это, но если вы посмотрите на события API для каждого типа виджета, вы увидите документацию, касающуюся create событие.

Также прочитайте верхнюю часть этой страницы документации: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Вы не должны использовать document.ready и вместо этого должен быть обязательным для pageinit событие для псевдостраниц. С помощью document.ready скорее всего, создаст для вас головную боль в будущем.

-- ОБНОВИТЬ --

Вы, вероятно, захотите позвонить .trigger('create') в обратном вызове, поэтому внешний HTML загружен до того, как вы попытаетесь его инициализировать:

$("#main").load('externalHtml.html', function () {
    $(this).trigger('create');
});
Источник
Другие вопросы по тегам