Question

这是html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/lib/cordova-2.7.0.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/converter/Temperature.js"></script>

<script type="text/javascript" charset="utf-8" src="js/converter/TemperatureContents.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
alert("fgfgf"); 


});

</script>


</head>
<body>
 <div data-role="page" id="converterListPage" data-theme="b">

   <div data-role="header">
    <h1>UNIT CONVERTER</h1>
   </div>
   <div data-role="content" data-theme="e">


       <ul data-role="listview" data-inset="true">
       <li><a href="#"  id="tempButton">TEMPERATURE</a></li>
       <li><a href="#">WEIGHT</a></li>
       <li><a href="#">CURRENCY CONVERTER</a></li>
       </ul>


   </div>
 </div>
 <div data-role="page" id="temperatureContents" data-theme="e">
   <div data-role="content">
    <p>sdfsdsdsds</p>
   </div>
 </div> 
</body>
</html>

Temperature.js

$('#converterListPage').live('pageinit', function() {

alert("converter list page");
$("#tempButton").off('click').on('click',function() 
{
  //$.mobile.changePage("#temperatureContents",null,true,true);
  alert("button clicked");
});

});

在这一行上收到错误：

$('#converterListPage').live('pageinit', function()

，错误是：

07-31 11：01：42.405：E / Web Console（730）：TypeError：表达式'$（'＃converterListPage'）的结果.live'[undefined]不是函数。在file：///android_asset/www/js/converter/Temperature.js：10 使用后：

yes now there is no error: but when putting this line in DOM READY: 



$(document).ready(function()
{
alert("fgfgf"); 

$("#tempButton").off('click').on('click',function() 
{
 // $.mobile.changePage("#temperatureContents",null,true,true);
  alert("button clicked");
});

它的工作但是在放入temperature.js时它不会触发事件：

$('#converterListPage').on('pageshow', function() {

alert("converter list page");
$("#tempButton").off('click').on('click',function() 
{
 // $.mobile.changePage("#temperatureContents",null,true,true);
  alert("button clicked");
});

});

Answer 1

函数live已被弃用，并且在jQuery 1.8+中不存在，但您已被告知，所以我不打算解释更多细节。

关于新页面事件处理，您需要使用委派处理，目前这是处理页面事件的正确方法。

改变这个：

$('#converterListPage').live('pageinit', function() {
    alert("converter list page");
    $("#tempButton").off('click').on('click',function() {
        alert("button clicked");
    });
});

到此：

$(document).on('pageinit', '#converterListPage',function() {
    alert("converter list page");
    $(document).on('click',"#tempButton",function() {
        alert("button clicked");
    });
});

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/PMrDn/66/

很少注意到：

页面事件绑定到文档对象，在这种情况下，它不关心页面 #converterListPage 是否存在但是它会在某个时刻传播到它该页面在DOM中可用。
我删除了.off（'click'），因为在pageinit的情况下你不需要它，它只会触发一次。如果是其他页面事件（例如pagebeforeshow），请将此行用于您的点击事件：
```
 $(document).off('click',"#tempButton").on('click',"#tempButton",function() {
```

另一件事，如果此页面不是您的初始页面，那么您的javascript将被丢弃。这是因为jQuery Mobile会删除其HEAD内容的每个后续页面。

如果是这种情况，请阅读 ARTICLE 以了解如何解决此问题。如果您有任何问题，请随时提出。

Answer 2

由于.live() 已弃用，请使用.on()代替

$('#converterListPage').on('pageinit', function()

并且确保你自己准备好这份文件。

Answer 3

在jQuery 1.10中删除了

.live事件处理程序使用$('#converterListPage').on('pageinit', function()

我的.live函数没有触发，并使用jquery 1.10.1给我错误

3 个答案: