Проблема с добавлением обработчика событий клика в JQuery Mobile в браузере Android - PullRequest
Новая
       23

Проблема с добавлением обработчика событий клика в JQuery Mobile в браузере Android

2 голосов
/ 05 июля 2011

У меня странная проблема с браузером Android.Надеюсь, это то, что я делаю в корне неправильно, а не ошибка JQuery.Я пробовал следующий код в Firefox и Chrome, которые работают нормально.Однако, когда я пытаюсь сделать это в браузере Android, нажатие на кнопку «Получить твиты» не работает.Кажется, это проблема с JQuery Mobile, потому что, когда я добавляю событие к обычному объекту, не являющемуся JQuery Mobile, оно связывается правильно и запускает console.log.Я безуспешно пытался работать как с альфа-, так и с бета-версиями 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>

Этот скрипт также не работает только в браузере Android. 

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

Ответы [ 2 ]

6 голосов
/ 05 июля 2011

Так что, похоже, я просто делал это по-старому, как JQuery, когда на самом деле сейчас есть способ JQuery Mobile.Вот правильный код. 

$('#page').live('pagecreate',function(event){
  console.log('page loaded');
  $(".tweetjack").live('tap',function(event) {
      console.log('test');
  });
});
0 голосов
/ 25 сентября 2012

JQM, кажется, перехватывает щелчки и устанавливает href в '#', что может вызвать хаос, если вы пытаетесь их перехватить. Это сработало для меня, чтобы обработать ссылку до того, как JQM доберется до нее: 

$(document).bind("pageinit", function() {
   $("a").bind("click", function(e){  fix_mobile_links(this, e)  });
}
...