Динамические страницы jQueryMobile - события, запускаемые несколько раз

Question

Я работаю над сайтом jQueryMobile, который позволяет людям заказывать продукты. Есть динамические страницы (например, страница продукта), и у меня есть некоторые события (которые подсчитывают общее количество, обновляют список ингредиентов и т. Д.).

При первом входе на страницу продукта все работает нормально, однако после добавления продукта в корзину и возврата к другому продукту все снова срабатывает. Так, например, если вы добавляете 10 товаров в корзину, для 10 товара все (включая вызовы ajax) запускается 10 раз.

Я записал видео здесь: http://www.screenr.com/Ew5H чтобы вы могли точно увидеть проблему.

URL-адрес веб-сайта: http://m2.pizzaboy.y11.in/

Файл JS находится здесь: http://m2.pizzaboy.y11.in/assets/js/main.js

Я использую:

$( document ).delegate("#page-product", "pageinit", function() {
    //stuff here
});

инициировать все действия на странице товара.

Я попробовал все виды решений, чтобы исправить это (удалить элементы страницы, которые больше не активны, с помощью флагов и т. Д.), Но ничего не получалось.

Спасибо за помощь

Answer 1

Решением действительно было открепление событий (используя .off), тем не мение .off не работает (по крайней мере для меня), если вы предоставляете несколько селекторов.

Пример:

// This is NOT WORKING because multiple elements are used
$(document).off('change', '.class1, .class2, #idelement');

// This WORKS
$(document).off('change','#idelement');
$(document).off('change','.class1');
// and so on...

// You can add a class to all elements that you want to
// unbind, and then just call it once
$(document).off('event','.classForUnbind')

// If you want to unbind all elements
$(document).off('change');

Надеюсь это поможет