2011-07-05 12 views
2

アンドロイドブラウザに奇妙な問題があります。うまくいけば、これは私が根本的に間違っていて、JQueryのバグではないことです。 FirefoxとChromeでうまく動作する次のコードを試しました。しかし、Androidブラウザで試してみると、Get Tweetsボタンをクリックしても動作しません。通常の非JQuery Mobileオブジェクトにイベントを追加すると、正しくバインドされ、console.logが起動するため、JQuery Mobileの問題と思われます。私は運がないJQuery Mobileのアルファ版とベータ版の両方を試しました。AndroidブラウザでJQuery Mobileでクリックイベントハンドラを追加する際の問題

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css" rel="stylesheet" > 
      .chkTag { color: black; } 
      /*.chkFeed { color: black; }*/ 
     </style> 
     <link rel="stylesheet" href="twitter/style/jquery.mobile-1.0a4.1.min.css"  />   
     <script type="text/javascript" src="twitter/js/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript" src="twitter/js/jquery.mobile-1.0a4.1.js">  
</script> 
    <script type="text/javascript"> 
    $(document).ready(function() {    
     $(".tweetjack").click(function() { 
      console.log('test'); 
     }); 
     console.log('page loaded'); 
    }); 
    </script> 
    <style type="text/css"> 
     .profile img { width: 48px; height: 48px; display: inline; float: left; padding-right: 10px; } 
     /*.ui-collapsible-contain { max-height: 950px; min-height: 950px; }*/ 
    </style> 
</head> 
<body> 
    <div id="page" data-role="page" data-theme="d"> 
     <div id="header" data-role="header"> 
      <h1>Twitter App</h1> 
     </div> 
     <div data-role="content"> 
      <div id="1" class="tweetjack" data-role="collapsible" data-collapsed="true"><h3>Get Tweets</h3><p id="text1"></p><div data-role="collapsible" data-collapsed="true"><h3 date-theme="a">Filter</h3></div></div> 
     </div> 
     <div id="footer" data-role="footer"> 
      <a class="tweetjack"><h2>BT</h2></a> 
     </div> 
    </div> 
</body> 
</html> 

このスクリプトもアンドロイドブラウザでのみ失敗します。

$('#page').live('pagecreate',function(event){ 
     console.log('page loaded'); 
     $(".tweetjack").click(function() { 
      console.log('test'); 
     }); 
    }); 
+1

は「pagecreate」イベントではなく、$(ドキュメント).ready()を使用してみてください:http://jquerymobile.com/demos/1.0 b1 /#/ demos/1.0b1/docs/api/events.html –

+0

私はこれと同じ問題を.ready()に置き換えました。 Clickイベントハンドラは、Android携帯以外のすべてのブラウザで正常に動作します。 – Caimen

+0

どのようにコンソールを見ていますか? –

答えて

6

だから、私は単にそれを今これらの事を行うためのjQueryのモバイル道が実際にそこにある昔ながらのjQueryの道をやっていたようです。ここに正しいコードがあります。

$('#page').live('pagecreate',function(event){ 
    console.log('page loaded'); 
    $(".tweetjack").live('tap',function(event) { 
     console.log('test'); 
    }); 
}); 
0

JQMはクリックを傍受し、あなたがそれらを傍受しようとしている場合、一部の大混乱を引き起こす可能性があります「#」へのhrefを設定しているようです。これはJQMはそれに到達する前にリンクを処理するために、私の仕事:

$(document).bind("pageinit", function() { 
    $("a").bind("click", function(e){ fix_mobile_links(this, e) }); 
} 
関連する問題