jquerymobile點擊事件不起作用

我是JqueryMobile的新手。我想嘗試一個按鈕一個簡單的點擊事件，但它不工作（我使用在Firefox）jquerymobile點擊事件不起作用

的HTML是

<!DOCTYPE html> 
<html dir='ltr'> 
<head> 
<title>Test Page</title> 
<link rel="stylesheet" href="/css/style.css"/> 
<script src='js/jquery.mobile.js'></script> 
<script src='js/script.js'></script> 
</head> 
<body> 
    <div data-role="page" id='mypage'> 
     <button id='load_ajax'>Carica</button> 
     <br /> 
     <div id='content'></div> 
    </div><!-- /content --> 
</body> 
</html>

和的script.js腳本是

即使使用調試器，也不會彈出警報。

來源

2012-11-19 Grey

我想問題是在代碼調用.delegate（）的時候，頁面中不存在所選元素。此外請檢查JS文件是否正確加載。

下面的代碼，其中包括您發佈的作品正確的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    </head> 
    <body> 
     <!-- /page --> 
     <div data-role="page" id='mypage'> 
      <div id='content'> 
       <button id='load_ajax'>Carica</button> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $('#mypage').delegate('#load_ajax','click', function (e) { 
       alert('test'); 
      }); 
     </script> 
    </body> 
</html>

而且爲jQuery的API中提到：

在jQuery 1.7，.delegate（）已被取代通過.on（）方法。然而，對於較早的版本，它仍然是使用事件委派的最有效手段。

事件處理程序僅結合它們必須存在在頁面上當前選定的元素和你的代碼使調用來。對時間（）。爲確保元素存在且可以選擇，在文檔就緒處理程序內爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入到頁面中，請在將新HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件來附加事件處理程序。

委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。 在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此可以安全地在那裏附加事件而無需等待文檔準備就緒。

看了上面你可以考慮改變你的代碼：

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript"> $(document).on('click', '#load_ajax', function(e){ // your code alert($(this).text()); }); </script> </head> <body>  <div data-role="page" id='mypage'> <div id='content'> <button id='load_ajax'>Carica</button> </div> </div> </body> </html>

來源

2012-11-19 19:07:50

我覺得這個解決方案的工作，因爲它會調用jQuery的1.7.2。如果你刪除了這個庫，它就不能工作了。這是必要的嗎？我認爲jquerymobile不需要jquery。 – Grey

您可以閱讀http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html並檢查http://jquerymobile.com/download/。如果您刪除了jQuery，那麼$符號無法在jQuery Mobile JS文件中解析。 –

回答

相關問題