Невозможно получить событие раскладывания / сворачивания JQuery-Mobile для выполнения

У меня есть следующий демонстрационный HTML-файл, который я использую для развертывания / разворачивания событий JQuery-Mobile, и я не могу запустить событие JavaScript. Я основываю это на примере JSFiddle здесь: http://jsfiddle.net/6txWy/

Я чувствую, что просто пропускаю что-то простое, но вот мой HTML-файл:

<html> 
<head> 
  <title>References</title>

  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <link rel="stylesheet" href="css/main.css" />

  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>  

  <script type="text/javascript">
  $('#my-collaspible').bind('expand', function()
  {
    alert('Expanded');
  }).bind('collapse', function () {
    alert('Collapsed');
  });
  </script>
</head> 

<body>
  <div data-role="page">
      <div data-role="content">
          <div data-role="collapsible" id="my-collaspible">
              <h3>My Title</h3>
              <p>My Body</p>
          </div>
      </div>
  </div>
</body>
</html>

Свернуть и расширить работу, но предупреждения никогда не запускаются.

Спасибо! блоха

Источник

1 ответ

Решение

Добавьте вызов PageInit, чтобы убедиться, что страница загружена до привязки событий

Пример:

Код:

$('#home').live('pageinit', function(event) {
    $('#my-collaspible').bind('expand', function() {
        alert('Expanded');
    }).bind('collapse', function() {
        alert('Collapsed');
    });
});
Источник
Другие вопросы по тегам