primefaces javascript event for tab inside accordian panel

Question

i am using primefaces accordianPanel

<h:form id="MainMenuForm" style="font-size: 13px;font-weight: bold;">
<p:accordionPanel id="accord">
            <p:tab id="hometab">
                <f:facet name="title">
                    <p:graphicImage id="homeIcon" value="Images/home.png" width="13%" height="13%" />
                    <p:outputLabel value="Home" id="homeLabel"/>
                </f:facet>
                <ul>
                    <li>VAL1</li>
                    <li>VAL2</li>
                    <li>VAL2</li>
                </ul>
            </p:tab>

            <p:tab>
                <f:facet name="title">
                    <p:graphicImage id="projectIcon" value="Images/CreateProject.png" width="13%" height="13%" />
                    <p:outputLabel value="Project" />
                </f:facet>
            </p:tab>
</p:accordionPanel>
</h:form>

I am trying to attach a jquery to getthe tab onclick event

$('#MainMenuForm\\:accord\\:hometab').on( "click", function() {
    alert(1);
});

but i am not able to get the alert can some one please help me out in callina a javascript function on primefaces accordian tab onclick.

Answer 1

Accordion has a tabChange event. And with the PrimeFaces Extensions pe:javascript you can call javascript on each available event without a server roundtrip