Команда JQuery Mobile («создать») не работает

Question

Сегодня вечером JQuery Mobile заставляет меня плакать. Я пытаюсь создать пользовательские элементы управления, чтобы не повторять определенные элементы через мое приложение, и это доставляет мне трудности. В частности, у меня есть следующее в файле HTML:

<div id="custom-header" data-role="header" data-position="inline" data-theme="f">
    <a href="index.html" data-icon="back" style="margin-top:5px" data-theme="b">Back</a>
    <div style="text-align: center; padding-top: 5px; padding-bottom: 3px"><img src="../images/logo.png" ></div>
    <a href="index.html" data-icon="home" style="margin-top:5px" data-theme="b">Home</a>
</div>

В основном файле я делаю:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>        
<div data-role="page" id="test-console" data-theme="m">

    <div id="me-header"></div>

    <script>

        $.get('header.html', function (retData) {
            $('me-header').html(retData).trigger('create');
        });

     </script>

</div>

Так вот в чем проблема - заголовок не отображается так же, как при вставке содержимого header.html прямо в мою страницу JQM. Такое ощущение, что триггер («создать») ничего не делает.

Есть идеи? Я прожег около трех часов, и учебники типа http://jquerymobiledictionary.pl/faq.html, похоже, не применяются ..

Answer 1

При изменении верхнего или нижнего колонтитула или содержимого, вы можете вызвать pagecreate на странице:

$('#me-header').closest(":jqmData(role='page')").trigger('pagecreate');

Это ошибка jQM: https://github.com/jquery/jquery-mobile/issues/2703. Согласно комментарию в отчете о проблеме, вызов pagecreate несколько раз может вызвать проблемы, как описано в https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293.

Answer 2

Мне кажется, я нашел «лучший» доступный ответ.Короче говоря, элементы роли данных типа header и footer не являются стандартными виджетами.Это своего рода гибридная конструкция.Я узнал об этом, просто пройдя исходный код JQueryMobile.У них нет метода create, поэтому его нельзя вызывать.

Мой обходной путь - просто применить классы непосредственно к моему коду, а не ожидать, что виджет сделает это за меня.Не идеально, но работает достаточно хорошо.

Answer 3

Для меня .trigger('create'); всегда работает, если применяется к элементу с data-role="page"

Попробуйте: $('#test-console').trigger('create');

Надеюсь, это поможет ..

Answer 4

этот вопрос уже достаточно старый, но я только что столкнулся с проблемой, вот как я справился с этим (это поддерживает заданную тему данных и применяет правильные роли для содержащихся div и заголовков)

$('your_selector').find('div[data-role="header"], div[data-role="footer"]').each(
    function( ){
        var dR = $(this).attr('data-role');
        var dT = $(this).attr('data-theme');
        $(this).addClass('ui-' + dR + ' ui-bar-' + dT).attr('role', (dR == 'header' ? 'banner' : 'contentinfo') ).children('h1, h2, h3, h4').each(
            function( ){
                $(this).addClass('ui-title').attr({'role':'heading', 'aria-level':'1'});
            }
        )
    }
);

в зависимости от вашего кода, может быть удобнее установить это как функцию и отправить ваш селектор в качестве аргумента. Надеюсь, это поможет.

Answer 5

Я обнаружил, что триггер ('create');

работает при применении к телу так:

$('body').append(html).trigger('create');

Но проблема, с которой я сейчас сталкиваюсь, заключается вВ списке ul выдается неопределенная ошибка.

Answer 6

$('me-header').html(retData).trigger('create');

должно быть:

$('me-header').append(retData).trigger('create');

Answer 7

Вызов:

trigger('pagecreate');

сразу после:

trigger('create');

у меня работает.

Answer 8

Как и другие, меня сводит с ума вводить заголовок на странице. Как сказал Энтони, проблема в том, что заголовок не является «основным» виджетом. Классы не добавляются jqm, делающим инъекцию.

Я не очень люблю добавлять пользовательский интерфейс в свои классы.

Мое (сумасшедшее?) Предложение - создать новую страницу (включая заголовок), а затем извлечь тег заголовка, включающий в себя всю церемонию пользовательского интерфейса класса, добавленную jqm. Я на самом деле не знаю, как это работает, но кажется, что это работает и кажется более реалистичным, чем добавление классов руками.

ниже приведен пример. Вам нравится?

$( '[data-role=page]' ).on( 'pageinit', function ( event, ui ) {
  var sHeader = '<div data-role="header" id="tobechanged" data-position="fixed" data-id="CPL">';
        sHeader += '<a href="#panelImageDetailLeft" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu1</a>';
        sHeader += '<h1>What a nice title </h1 >';
        sHeader += '<a href="#panelImageDetailRight" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu2</a>';
sHeader += '</div>';

//Create a temporary page to initialize all the ui-class 
//var sId = core.misc.GUID_new();
var sId = "azerty";
$( '#body' ).append( '<div data-role="page" id="' + sId + '">' + sHeader + '<div data-role="content">content</div></div>' );
$.mobile.initializePage(); //do not know if needed
$( '#' + sId ).page();  //very important to let jqm generate the class ui
//console.log( "page():\n" + $( '#' + sId ).html() );

var $myHeader = $( '#tobechanged' );
//console.log( "tobechanged:\n" + $myHeader.html());

//clean the temporary page
$( '#' + sId ).empty();
$.mobile.initializePage(); //do not know if needed

//replace the id
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 
$myHeader.attr( "id", $( "#" + event.target.id ).attr("id") + "Header" );
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 

$( "#" + event.target.id ).find( "[data-role=header]" ).replaceWith( $myHeader );

}); * * 1 010

Answer 9

Это не ответ на конкретный вопрос OP, но одной из причин того, что .trigger ('create') не работает, может быть то, что jQuery Mobile не загружен должным образом в текущей области и, следовательно, не реагирует на триггер. что может произойти, например, в плохо настроенной конфигурации RequireJS.

Не помешает проверить console.log ($. Mobile), если он показывает неопределенное ...

Answer 10

Возможно, попробуйте:

$('#me-header').append(retData).trigger('create');