剧本中的 jquery mobile，$("select").selectmenu("refresh", true) 在 addClass 错误时中断

Question

我正在使用 jquery mobile，但遇到了黑莓 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 等...除了黑莓 playbook。

在剧本中，附加 Web Inspector 后，我收到了这个 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 的说明）

此外，我注意到当我在我的主索引页面上尝试此操作并将其加载到文档 pageinit 中时，它工作得非常好。

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

如果您能解释为什么我的“现场”活动不起作用，请告诉我。

（我知道 live 在 1.7 中已被弃用，但我还没有找到任何关于 jquery mobile 与 ajax 页面调用的其他用途的文档）

谢谢

Answer 1

您正在寻找的是委托事件处理程序。 $([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() 方法的快捷方式。

更新

这是http://code.jquery.com/mobile/latest/jquery.mobile.js中与第8107行相关的代码块：

...
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" ) );
    });
},
...

Answer 2

想通了，自己的错。在以下场景中，假设您正在尝试设置选项中不存在的值...

<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 在这种情况下会中断。经验教训，在运行“刷新”之前始终检查选项的白名单。