jquerymobile点击事件不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

我是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脚本是

即使使用调试器，也不会弹出警报。

回答：

我想问题是在代码调用.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> 
     <!-- /page --> 
     <div data-role="page" id='mypage'> 
      <div id='content'> 
       <button id='load_ajax'>Carica</button> 
      </div> 
     </div> 
    </body> 
</html>

以上是 jquerymobile点击事件不起作用 的全部内容， 来源链接： utcz.com/qa/259581.html

回到顶部