與Kendo UI的Jquery移動UI列表視圖

Question

我正在使用Jquery移動UI列表視圖。

<div data-role="content"> 
       <ul data-role="listview" data-inset="true" data-theme="a"> 

        <li> 
         <a href="Area.aspx">Area</a> 
        </li> 

      </div> 

在「Area.aspx」頁面中，我有一個Kendo UI網格。

<div id="example" class="k-content"> 
      <div id="clientsDb"> 

       <div id="grid" style="height: 380px"></div> 

      </div> 

      <style scoped> 
       #clientsDb { 
        width: 692px; 
        height: 413px; 
        margin: 30px auto; 
        padding: 51px 4px 0 4px; 
        background: url('web/grid/clientsDb.png') no-repeat 0 0; 
       } 
      </style> 

      <script type="text/javascript"> 
       $(document).ready(function() { 
        $("#grid").kendoGrid({ 
         dataSource: { 
          data: createRandomData(50), 
          pageSize: 10 
         }, 
         groupable: true, 
         sortable: true, 
         pageable: { 
          refresh: true, 
          pageSizes: true 
         }, 
         columns: [{ 
          field: "FirstName", 
          width: 90, 
          title: "First Name" 
         }, { 
          field: "LastName", 
          width: 90, 
          title: "Last Name" 
         }, { 
          width: 100, 
          field: "City" 
         }, { 
          field: "Title" 
         }, { 
          field: "BirthDate", 
          title: "Birth Date", 
          template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' 
         }, { 
          width: 50, 
          field: "Age" 
         } 
         ] 
        }); 
       }); 
      </script> 
     </div> 

我的問題是當我點擊鏈接區域頁面不導航。它堅持顯示的Jquery加載圖像。

Answer 1

這是因爲jquery Mobile會攔截<a>標籤，並使用AJAX獲取HTML來導航頁面，而不是直接更改頁面。這會導致你在「Area.aspx」中的javascript不會執行。

要解決此問題，您需要在網址中添加data-ajax="false"和rel="external"。

爲了更瞭解有關jQuery Mobile的，請參閱jQuery Mobile的API：
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

還是我對這個問題博客：
http://demanstudio.blogspot.com/2013/02/javascript-do-not-execute-in-jquery.html

<a href="Area.aspx" rel="external" data-ajax="false">Area</a>