Question

我正在使用asp.net网络表单。我有一些带有jquery.mobile widjets的DynamicDataField：

   <head>
       <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-     1.3.2.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">   </script>
<script>
    function go() {
  ////some code
   };
 </script>
 </head>
 <div>
 <div data-role="rangeslider" class="searchBlock">
  <label for="range-1a">Комнат:</label>
   <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range"    class="seearchSlider" />
   <label for="range-1b">Rangeslider:</label>
   <input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
 </div>
 ///etc, several same divs

这个DynamicDataField（Search.ascx）我放在我的Main.Master padge上：

 <%@ Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
 <head runat="server">

<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>

 <asp:ContentPlaceHolder ID="TitleContent" runat="server" />

 </head>
 <body>
 <div id="left">
        <div style="background: #fff">
             <search:search id="menu2" runat="server"/>
        </div>
    </div>
 </body>

问题是：添加后

   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">   </script>

我的所有项目开始表现得很奇怪。所有字体等都像在jquery.mobile widjet中一样，一些javascript方法不起作用。所以。如何隔离jquery.mobile-1.3.2.min.js？我希望它只能在Search.ascx中使用。有什么建议？ sry，我是jquery的新手：）

Answer 1

默认情况下，jQuery Mobile增强了页面上的所有内容。您可以在页面正文上使用data-enhance="false，只需在要增强的控件上使用data-enhance="true"即可。

有关详细信息，请参阅the docs。

Answer 2

在这种情况下，您需要告诉JQM不要自动初始化页面。在加载jQuery之后和加载jQuery mobile JS库之前，应该在mobileinit触发应用全局更改后执行此操作。

尽管如此，你需要手动增强JQM元素（小部件）。

<head>
  <!-- jQuery.js here -->
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.autoInitializePage = false;
    });
  </script>
  <!-- jQuery Mobile.js here -->
</head>

jquery.mobile，与其他页面隔离等

2 个答案: