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 documentation，要捕获的事件是collapsiblecollapse 和collapsibleexpand。当我尝试使用这些时，事件处理程序永远不会被调用。在网上看，我用collapse 和expand 替换了这些事件。有了这些，事件处理程序将在单击可折叠控件时被调用，但可折叠小部件在处理程序运行之前或之后都不会折叠或展开。这不仅仅是一个视觉问题，因为使用.collapsible('option', 'collapsed') 读取的可折叠状态也没有改变。

在处理程序内部，我尝试了添加或删除ui-collapsible-collapsed 类或在.trigger('create') 之前设置collapsible 选项的各种组合，甚至在处理程序内部触发collapsiblecollapse 和collapsibleexpand（当它是绑定到collapse 和expand，当然）。删除 .off() 行没有任何区别（我无法想象为什么会这样）。到目前为止，我尝试过的任何操作都不会导致当处理程序在绑定到collapse 或expand 时实际运行时单击时折叠或展开。处理程序中实际包含什么代码，或者我在 <div> 标记中是否有 data-collapsed 属性都没有关系。

看来我缺少一些东西，如果能以我的方式看到错误，我将不胜感激。

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 中的所有内容都将被丢弃。这也可能是您的代码示例未执行的原因。这个问题的解决方案可以喜欢HERE。