jquery mobile в playbook, $("select").selectmenu("refresh", true) прерывается при ошибке addClass

Question

Я использую JQuery Mobile и столкнулся с проблемой с BlackBerry Playbook. У меня есть страницы, которые я загружаю динамически через jquery В jquery mobile с помощью $.mobile.changePage('/full/url/to/page');

Когда страница загружается, я фиксирую событие pageinit, и вы можете увидеть ниже, над чем я работаю...

<div id="Page1">
<select id="selectId">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
...

$("#Page1").live('pageinit', function () {

  $("#selectId").val("1");
  $("#selectId").selectmenu("refresh", true);
});

Это прекрасно работает в iOS, Chrome, Android и т. Д.... за исключением BlackBerry Playbook.

В playbook после подключения веб-инспектора я получаю эту ошибку javascript, которая выглядит так, будто библиотеки jquery не загружаются, когда он пытается переформатировать выбранный объект...

TypeError: Result of expression 'span.text( text ).addClass' [undefined] is not a function.
code.jquery.com/mobile/latest/jquery.mobile.js:8107

(согласно инструкциям от: http://jquerymobile.com/demos/1.1.1/docs/api/events.html)

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

$(document).bind("pageinit", function () {
    $("#test").val("2");
    $("#test").selectmenu("refresh", true);
});

Если вы можете пролить свет на то, почему мое "живое" мероприятие не работает, пожалуйста, дайте мне знать.

(Я знаю, что в версии 1.7 устарела, но я не нашел никаких документов о том, что еще можно использовать для jquery mobile с вызовами на странице ajax)

Спасибо

Answer 1

Разобрался, по собственной вине. В следующем сценарии представьте, что вы пытаетесь установить значение, которого нет в опциях...

<div id="Page1">
<select id="selectId">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
...

$("#Page1").live('pageinit', function () {

$("#selectId").val("notHere");
  $("#selectId").selectmenu("refresh", true);
});

JQuery ломается в этом сценарии. Извлеченный урок, всегда проверяйте белый список параметров, прежде чем запускать "обновление".

Answer 2

То, что вы ищете, это делегированные обработчики событий. $([selector]).live([event], [callback]) такой же как $(document).on([event], [callback]), В принципе .live() устанавливает делегированный обработчик события на document элемент. С помощью .on() (jQuery 1.7+) или .delegate() (jQuery 1.4.2+) дает дополнительное преимущество, заключающееся в том, что вы можете выбрать корневой элемент (элемент, который всегда должен присутствовать в DOM), что позволяет вашему коду работать быстрее.

JQuery 1.7+:

$(document).on("pageinit", "#Page1", function () {
    $(this).find("#selectId").val("1").selectmenu("refresh", true);
});

Документы: http://api.jquery.com/on

JQuery 1.4.2+

$(document).delegate("#Page1", "pageinit", function () {
    $(this).find("#selectId").val("1").selectmenu("refresh", true);
});

Документы: http://api.jquery.com/delegate

Примечание: если вы используете jQuery 1.7+, .delegate() а также .live() просто ярлыки, которые используют новый .on() метод.

ОБНОВИТЬ

Вот блок кода, связанный со строкой 8107 в http://code.jquery.com/mobile/latest/jquery.mobile.js:

...
setButtonText: function() {
    var self = this,
        selected = this.selected(),
        text = this.placeholder,
        span = $( document.createElement( "span" ) );

    this.button.find( ".ui-btn-text" ).html(function() {
        if ( selected.length ) {
            text = selected.map(function() {
                return $( this ).text();
            }).get().join( ", " );
        } else {
            text = self.placeholder;
        }

        // TODO possibly aggregate multiple select option classes
        return span.text( text )
            .addClass( self.select.attr( "class" ) )//line 8107 right here
            .addClass( selected.attr( "class" ) );
    });
},
...