Question

我正在使用jquery mobile并遇到黑莓剧本的问题。我有通过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在这种情况下中断。获得的经验教训，在运行“刷新”之前，请务必检查选项的白名单。

jquery mobile in playbook，$（“select”）。selectmenu（“refresh”，true）中断addClass错误

2 个答案: