Question

可折叠div的样式没有得到更新。我使用的是最新的jquery-mobile 1.2.0版本。我的代码如下。请参考缺少的内容

HTML

<div data-role="page" id="eventDetails">
<div data-role="content">
<div data-role="collapsible-set" class="collapsibleSetClass">
    <div data-role="collapsible" data-content-theme="b" class="collapsibleClass">
    </div>
</div>

</div><!-- /content -->
</div>

使用javascript：

    $(document).bind("mobileinit", function(){
        $.mobile.changePage.defaults.changeHash = false;
        $.mobile.collapsibleset.prototype.options.initSelector = ".collpasibleSetClass";
        initEvents();
    });

var initEvents = function(){
 $.mobile.changePage( "#eventDetails", { transition: "slide"} );
 var $description = $('.collapsibleClass');
 $description.html('');
 var $title = $('<h3/>').append(eventObj.eventTitle);
 var $eventDetails = $('<p/>').append(eventObj.eventDescription);
 $description.append($title).append($eventDetails);
 $('.collapsibleSetClass').collapsibleset("refresh");
}

Answer 1

您正在尝试刷新尚未初始化的窗口小部件。您在initEvents()事件处理程序中调用mobileinit，该事件处理程序在初始化任何内容之前触发。

所以你真正需要做的就是删除刷新可折叠小部件的行，jQuery Mobile会自动初始化它们：

var initEvents = function(){
 $.mobile.changePage( "#eventDetails", { transition: "slide"} );
 var $description = $('.collapsibleClass');
 $description.html('');
 var $title = $('<h3/>').append(eventObj.eventTitle);
 var $eventDetails = $('<p/>').append(eventObj.eventDescription);
 $description.append($title).append($eventDetails);
 //$('.collapsibleSetClass').collapsibleset("refresh");
}

另请注意，您必须在页面的HTML或您选择的HTML元素之后包含所有JS。出于这个原因，我建议您使用pageinit作为第一页，而不是mobileinit。

在jquery mobile 1.2.0中，可折叠div的样式没有更新

1 个答案: