Jquery CSS and JS to limited elements [closed]

Depending on jQuery Mobile version you're using.

  1. Solution 1:

    • Modify Global Settings on mobileinit, by setting ignoreContentEnabled to true. However, this affects app performance negatively, as it slows down processing/initializing widgets/elements.

      <head>
        <script src="jQuery.js"></script>
        <script>
          $(document).on("mobileinit", function () {
            $.mobile.ignoreContentEnabled = true;
          });
        </script>
        <script src="jQuery-Mobile.js"></script>
      <head>
      
    • Add data-enhance="false" to elements or div you want to keep untouched by jQM.

      <div data-role="content" data-enhance="false">
        <!-- elements -->
      </div>
      
      <input type="text" data-enhance="false">
      

  1. Solution 2:

    • Modify page widget defaults on mobileinit, by setting a .selector for keepNative. The .selector could be a <tag>, an #id or a .class.

      • jQuery Mobile <= 1.3.x

        <head>
          <script src="jQuery.js"></script>
          <script>
            $(document).on("mobileinit", function () {
              $.mobile.page.prototype.options.keepNative = $.mobile.page.prototype.options.keepNative + ", input, #foo, .native";
            });
          </script>
          <script src="jQuery-Mobile.js"></script>
        <head>
        
      • jQuery Mobile >= 1.4.x

        <head>
          <script src="jQuery.js"></script>
          <script>
            $(document).on("mobileinit", function () {
              $.mobile.keepNative = $.mobile.keepNative + ", input, #foo, .native";
            });
          </script>
          <script src="jQuery-Mobile.js"></script>
        <head>
        

      When page is being created, input, element with #foo ID and elements with native class, will be kept as is.


Demo