为什么使用f：ajax（JSF）更新后，我的Materialize可折叠菜单不起作用？

Posted 2021-05-04

我正在使用JSF 2.2和Materialize。当用户使用h:form，h:commandButton和f:ajax标签发送一个基本表单时，我需要更新可折叠的动态列表。

这是用户发送的表单的代码：

<h:form>
    ...
    <h:commandButton value="send!" action="#{...}">
        <f:ajax render="@form pgMenu" execute="@form"/>
    </h:commandButton>
</h:form>

此代码表示要更新的菜单：

<h:panelGroup id="pgMenu">
    <ul class="collapsible myList">
        <h:panelGroup rendered="#{not empty bean.variable}">
            <li class="bold item-li"><a class="collapsible-header item-a">New</a>
                <div class="collapsible-body">
                    <ul>
                        <a href="page1.xhtml"><li class="li-izquierda">New 1</li></a>
                        <a href="page2.xhtml"><li class="li-izquierda">New 2</li></a>
                    </ul>
                </div>
            </li>
        </h:panelGroup>
        <li class="bold item-li"><a class="collapsible-header item-a">Fases</a>
            <div class="collapsible-body">
                <ul>
                    <a href="#"><li class="li-izquierda">Planeación</li></a>
                    <a href="#"><li class="li-izquierda">Otra mas</li></a>
                </ul>
            </div>
        </li>
        <li class="bold item-li"><a class="collapsible-header item-a waves-teal">javascript</a>
            <div class="collapsible-body">
                <ul>
                    <a href="#"><li class="li-izquierda">Collapsible</li></a>
                    <a href="#"><li class="li-izquierda">Dialogs</li></a>
                </ul>
            </div>
        </li>
    </ul>
</h:panelGroup>

我的问题是，当pgMenuis更新时，菜单js的行为会冻结。

下一个图像显示发送表单之前和之后的菜单（我点击选项）。

更新前

更新后

谢谢！

答案

每次更新后，您的DOM结构都在变化，因此您需要销毁以前的Collapsible类实例：

instance.destroy();

然后，在渲染新结构后，您需要重新初始化Collapsible：

var newElement = document.getElementById('YOUR_COLLAPSIBLE_CONTAINER');
var instance = new M.Collapsible(newElement, {YOUR OPTIONS});

当使用materialize-css库时，我担心这是你唯一的选择。