0

I have a page of dynamically created JQuery 1.3.1 collapsible items (not in an accordion set), and I am trying to save the expanded or collapsed state of each item. The collapsible items work fine without attaching any handlers. My code to attach the handlers is here, which I'm calling in pagebeforeshow (I tried in pageshow as well):

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));
}

One of the HTML elements looks like this in the Chrome inspector:

enter image description here

According to the JQuery Mobile 1.3.1 documentation, the events to trap are collapsiblecollapse and collapsibleexpand. When I try using these, the event handlers never get called. Looking on the web I replaced these events with collapse and expand. With these, the event handler would be called when the collapsible was clicked, but the collapsible widget would not collapse or expand either before or after the handler ran. It's not just a visual issue, because the state of the collapsible as read with .collapsible('option', 'collapsed') did not change either.

Inside the handler I tried various combinations of adding or removing the ui-collapsible-collapsed class or setting the collapsible option before a .trigger('create'), and even triggering the collapsiblecollapse and collapsibleexpand inside the handler (when it was bound to collapse and expand, of course). Removing the .off() lines made no difference (I can't imagine why it would). Nothing I've tried so far will cause the collapsible to collapse or expand when clicked on when the handler actually runs while bound to collapse or expand. It doesn't matter what code is actually in the handler, or whether I have a data-collapsed attribute in the <div> tag to begin with or not.

So it seems there's something I'm missing, and I would appreciate any help in seeing the error in my ways.

4

1 回答 1

4

解决方案

工作示例：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内容，因此 a 中的所有内容都HEAD将被丢弃。这也可能是您的代码示例未执行的原因。这个问题的解决方案可以在这里。

于 2013-06-17T07:00:26.820 回答