jQuery Mobile在使用data role=none时取消绑定、删除或忽略刷新调用

Question

我试图忽略jQuery Mobile中所有刷新调用（因为当我将数据角色设置为"none"时，它们会生成错误），而不删除实际调用。

<div data-role="none">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1" data-role="none">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

以下调用在javascript中生成一个错误（因为数据角色="none"）。

$('#select-choice-1').selectmenu('refresh');

我收到的错误是：

Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' 

如果删除数据role="none"，则不存在此错误。

是否有一种方法可以忽略/覆盖刷新调用？我尝试过使用jQuery.unbind和.off，但没有成功，例如：

$(document).on("pageinit", "#mypage", function( event ) {
    $('#select-choice-1').unbind('refresh');
});

除非迫不得已，否则我不想删除Javascript中刷新的调用，因为我希望以后可以轻松地重新应用jQueryMobile样式。有人能解决这个问题吗？

Answer 1

try:

if($('#select-choice-1').selectmenu()){
      $('#select-choice-1').selectmenu('refresh');
}

或

if($('#select-choice-1').data("role")!="none"){ 
         $('#select-choice-1').selectmenu('refresh');
}

不能调用不存在的对象的方法。

Answer 2

如果要禁用.selectmenu()小部件，则需要在mobileinit上全局修改。此外，不需要添加data-role="none"。

通过这种方式，select标签将不会使用jQM进行增强/样式化，并且将保持不变（原生外观）。

如果这样做，就不应该使用.selectmenu("refresh")，因为小部件已被禁用。

要告诉jQM不要设置select标签的样式，请将全局修改绑定到mobileinit，将它们添加到jQuery之后和jQuery Mobile JS库之前。

1. jQuery Mobile 1.3.2及以下

   <script src="jquery-1.9.1.min.js"></script>
   <script>
     $(document).on("mobileinit", function() {
       $.mobile.page.prototype.options.keepNative = "select";
     });
   </script>
   <script src="jquery.mobile-1.3.2.min.js"></script>
   

   演示

2. jQuery Mobile 1.4

   <script src="jquery-1.10.2.min.js"></script>
   <script>
     $(document).on("mobileinit", function() {
       $.mobile.keepNative = "select";
     });
   </script>
   <script src="jquery.mobile-1.4.0-rc.1.min.js"></script>
   

   演示