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

Chrome检查器中的一个HTML元素如下所示：

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

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