jQuery Mobileが要素にカスタムクラスを追加しないようにする

jQuery Mobileを使用して、独自の要素やクラスを追加しないようにするにはどうすればよいですか？jQuery Mobileが要素にカスタムクラスを追加しないようにする

<div id="main-table"> 
    <ul> 
     <li> 
      <form method="get"> 
       <input name="SearchOrders" class="myInput" type="text" value="" /> 
       <input name="SendSearch" class="redButton searchButton" type="submit" value="" /> 
      </form> 
     </li> 
    </ul> 
</div>

しかし、jQueryのモバイルは、いくつかのdivとクラスを追加します：たとえば、私の元のHTMLはある

<div id="main-table"> 
    <ul class="my-account myTitle"> 
     <li> 
      <form method="get"> 
       <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> 
        <input name="SearchOrders" class="myInput" type="text" value=""> 
       </div> 
       <div class="ui-btn ui-input-btn ui-corner-all ui-shadow"> 
        <input name="SendSearch" class="redButton searchButton" type="submit" value=""> 
       </div> 
      </form> 
     </li> 
    </ul> 
</div>

私は各要素のデータ-役割= "none" を使用しない場合は、jQueryのモバイルはしません私のマークアップを変更するが、自分のHTMLを修正する必要がないソリューションを探している。

私が試してみた：

$(document).on('mobileinit',function(){ 
    $.mobile.keepNative = 'input'; 
});

をしかし、それは動作しません。

私も試してみた：親要素で

data-enhance="false"

をしかし、それはどちらか、動作しません。 Configuring Defaults：jQueryMobileのドキュメントから

出典

2017-01-20 GTS Joe

mobileinitイベント

のjQuery Mobileが起動すると、それはドキュメントオブジェクト上mobileinitイベントをトリガします。デフォルト設定を上書きするには、mobileinitにバインドします。

ここでのキーポイントは、jQuery Mobileの起動時に設定オーバーライドを使用できるようにするため、jQuery Mobileファイルをロードする前に設定スクリプトを頭に置く必要があります。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script> 
 
    $(document).on("mobileinit", function() { 
 
     $.mobile.keepNative = "input"; 
 
    }); 
 
    </script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 
<body> 
 
    <div data-role="page" id="page-1"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h1>Native Inputs</h1> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
     <div id="main-table"> 
 
     <ul> 
 
      <li> 
 
      <form method="get"> 
 
       <input name="SearchOrders" class="myInput" type="text" value="" /> 
 
       <input name="SendSearch" class="redButton searchButton" type="submit" value="" /> 
 
      </form> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-01-20 21:45:42 deblocker

jQuery Mobileが要素にカスタムクラスを追加しないようにする

答えて

関連する問題