javascript - Why is it that my Materialize collapsible menu doesn't work after updating with f:ajax (JSF)? -

i working jsf 2.2 , materialize. need update collapsible dynamic list when user sends 1 basic form h:form, h:commandbutton , f:ajax labels.

this code form sent user:

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

and code represents menu updated:

<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> 

my problem when pgmenuis updated, menu js behavior freezes.

the next images show menu before , after sending form (i clicking options).

before update

after update

thank you!