0

我正在使用 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 等中运行良好……除了黑莓剧本。

在剧本中，附加 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 页面调用的其他用途的文档）

谢谢

4

2 回答 2

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()方法的快捷方式。

更新

这是与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" ) );
    });
},
...
于 2012-08-24T20:02:54.790 回答
0

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

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

于 2012-08-27T15:57:40.993 回答