Есть ли способ остановить JQuery Mobile от дублирования событий? - PullRequest
Новая
       1

Есть ли способ остановить JQuery Mobile от дублирования событий?

2 голосов
/ 07 февраля 2012

Я прикрепляю событие клика к изображению на моей странице.

$('.ui-block-b img').click(function(event) {}

Я использую фиксированный нижний колонтитул jQuery для мобильных устройств.

Я пытался инициализировать это, используя события pagecreate и pageinit.

Когда ящелкните по ссылкам (загружаемым с помощью Ajax) в нижнем колонтитуле, а затем вернитесь на страницу с обработчиком щелчков, которые pagecreate и pageinit обновляются.Это присоединение другого события щелчка, поэтому, когда я нажимаю на изображение, запускаются события 2.

Мне интересно, есть ли событие jquery Mobile, которое решает эту проблему ??Я что-то пропустил в документации?

Я решил эту проблему, проверив, существует ли событие перед его присоединением, но кажется, что jQuery mobile должен что-то для этого обрабатывать?Я сделал 

var events = $('.ui-block-b img').data('events');
if (typeof events == 'undefined') { // attach handler}

Возможно, jQuery mobile уже обратилась к этой проблеме, и я просто что-то упустил?

1 Ответ

3 голосов
/ 09 февраля 2012

Вам не следует загружать JS с новой страницей, так как вы знаете, что проблема заключается в том, что JS запускается при каждом создании страницы и каждый раз, когда она связывает другое событие нажатия.

Решение состоит в том, чтобы ссылаться на ваши элементы с помощью встроенного указателя jQM $ .mobile.activePage, который становится доступным после возникновения события pagehow. Или поместив jQuery на слушателя в корневой раздел страницы (не в документе) в событии pageinit.

Используя $('.ui-block-b img').click(function(event) {}, вы потенциально можете присоединить событие связывания к элементам на более чем одной странице (поскольку jQuery добавляет страницы в DOM), что вы и делаете. 

<script type="text/javascript">         
   $("div:jqmData(role='page'):last").bind('pageinit', function(){
      //your code here - $.mobile.activePage not declared, but you can setup 
      // "on" events here that handle elements ONLY on this page
      //e.g. $(this).on('click', 'img.ui-block-b', function(){});
      // this puts a live event listener that only listens for this page
   });

   $("div:jqmData(role='page'):last").bind('pageshow', function(){
      //your code here - $.mobile.activePage works now
   });
</script>

Теперь, когда вы связываете события, вы гарантируете, что воздействуете только на элементы на текущей странице.


Организовать это немного сложно, поэтому я наметил лучшее решение, которое я дал здесь для другого вопроса: Jquerymobile - $ .mobile.changepage

...