0

这是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>

温度.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");
});

});
4

3 回答 3

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/

几点注意事项：

  • Page 事件绑定到文档对象，在这种情况下，它不关心页面是否#converterListPage存在，但它会在该页面在 DOM 中可用时传播给它。

  • 我删除了 .off('click') 因为在 pageinit 的情况下不需要它，它只会触发一次。如果发生其他页面事件（如 pagebeforeshow），请将此行用于您的点击事件：

     $(document).off('click',"#tempButton").on('click',"#tempButton",function() {

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

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

于 2013-07-31T07:02:41.397 回答
0

由于.live()不推荐使用.on()，而是喜欢

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

并确保您将其放入准备好的文档中..

于 2013-07-31T05:07:39.867 回答
0

.livejQuery 1.10 中删除的事件处理程序使用$('#converterListPage').on('pageinit', function()

于 2013-07-31T05:12:04.653 回答