JQuery Mobile складной виджет свернуть и развернуть события не работает

Question

У меня есть страница динамически создаваемых складных элементов JQuery 1.3.1 (не в гармошке), и я пытаюсь сохранить развернутое или свернутое состояние каждого элемента. Складные элементы работают нормально, без каких-либо обработчиков. Мой код для прикрепления обработчиков находится здесь, который я вызываю pagebeforeshow (Я пробовал в pageshow также):

function bindCollapsibleHistoryHandlers(){
    function getHandler(field, value){
        var handler = function(event, ui){
            var element = event.target.id;
            var id = (element.split('-'))[1];
            var status = window.mam_history.status('meetings', id);
            if (null == status){
                status = { "open": false, "note_open": false, "dist_open": false };
            }
            status[field] = value;
            var new_status = null;
            window.mam_history.status('meetings', id, status);
                        return true;
        }
        return handler;
    }

    $('.mtg_item').off('collapsiblecollapse');
    $('.mtg_item').on('collapsible', getHandler('open', false));
    $('.mtg_item').off('collapsibleexpand');
    $('.mtg_item').on('collapsibleexpand', getHandler('open', true));

    $('.dist_info').off('collapsiblecollapse');
    $('.dist_info').on('collapsiblecollapse', getHandler('dist_open', false));
    $('.dist_info').off('collapsibleexpand');
    $('.dist_info').on('collapsibleexpand', getHandler('dist_open', true));
}

Один из элементов HTML выглядит следующим образом в инспекторе Chrome:

Согласно документации JQuery Mobile 1.3.1, события, которые нужно перехватить, collapsiblecollapse а также collapsibleexpand, Когда я пытаюсь использовать их, обработчики событий никогда не вызывают. Глядя в Интернете, я заменил эти события на collapse а также expand, С их помощью обработчик события будет вызываться при щелчке на свертываемом объекте, но свернутый виджет не будет разворачиваться или разворачиваться ни до, ни после запуска обработчика. Это не просто визуальная проблема, потому что состояние складного, как прочитано с .collapsible('option', 'collapsed') тоже не изменилось.

Внутри обработчика я пробовал различные комбинации добавления или удаления ui-collapsible-collapsed класс или настройка collapsible вариант перед .trigger('create')и даже вызывая collapsiblecollapse а также collapsibleexpand внутри обработчика (когда он был связан с collapse а также expand, конечно). Удаление .off() линии не имели значения (я не могу себе представить, почему это будет). Ничто из того, что я пробовал до сих пор, не приведет к свертыванию или расширению складного объекта при нажатии на него, когда обработчик фактически выполняется, будучи привязанным collapse или же expand, Неважно, какой код на самом деле находится в обработчике, или у меня есть data-collapsed атрибут в <div> тег для начала или нет.

Так что, кажется, что-то мне не хватает, и я был бы признателен за любую помощь, чтобы увидеть ошибку в моем пути.

Answer 1

Решение

Рабочий пример: http://jsfiddle.net/Gajotres/3pCQh/

Поскольку у вас есть уведомления, правильным способом определения состояния сворачивания является использование события разворачивания и развертывания (информация, представленная в официальной документации, неверна). Также при связывании событий в jQuery Mobile особенно для динамически создаваемых объектов важно использовать делегированное связывание, например:

$(document).on( "collapse", "#test-collapsible", function( event, ui ){
    alert('Close');
});

$(document).on( "expand", "#test-collapsible", function( event, ui ){
    alert('Open');
});  

В этом примере неважно, существует объект или нет. Событие будет привязано к объекту документа и будет распространяться по правильному назначению, только если / когда объект станет доступным внутри DOM,

Несколько заметок

Если вы используете правильное событие страницы (например, pageinit) вам не нужно использовать off отменить привязку к событию. Pageinit сработает только один раз, точно так же, как документ готов при использовании с классическим jQuery.

Есть еще одна вещь. Если вы используете несколько HTML страниц вы должны быть осторожны с вашим JavaScript. Когда jQuery Mobile загружает дополнительные HTML страницы загружаются только BODY содержание, так что все внутри HEAD будут отброшены Это также может быть причиной того, что ваш пример кода не выполняется. Решения этой проблемы можно найти ЗДЕСЬ.