title: onclick event does not work with JSF
body: <p>I'm trying to make onclick() work on Primefaces. The first item "wildcard" works on-load of the page but all other p:menuitem does not work at all. </p>
  
  <p>jQuery:</p>
  
  <pre><code>function ShowLuceneInfo(part){
  
          jQuery('.luceneInfoMain &gt; #fuzzySearches').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #proximitySearches').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #rangeSearches').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #boostingATerm').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #booleanOperators').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #grouping').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #escapingSpecialCharacters').addClass('displayNone');
          jQuery('.luceneInfoMain &gt; #wildcardSearches').addClass('displayNone');
  
          jQuery('.ui-menu-item-label').removeClass('ui-state-selected');
  
          if(part == 'fuzzy'){
              jQuery('.luceneInfoMain div').removeClass('displayBlock');
              jQuery('.luceneInfoMain &gt; #fuzzySearches').removeClass('displayNone');
              jQuery('.luceneInfoMain &gt; #fuzzySearches').addClass('displayBlock');
              jQuery('#luceneID\\:luceneID\\:fuzzy').addClass('ui-state-selected');
  
          }
          else if(part == 'proximity'){
              jQuery('.luceneInfoMain div').removeClass('displayBlock');
              jQuery('.luceneInfoMain &gt; #proximitySearches').removeClass('displayNone');
              jQuery('.luceneInfoMain &gt; #proximitySearches').addClass('displayBlock');
              jQuery('#luceneID\\:luceneID\\:proximity').addClass('ui-state-selected');
          }
          else if(part == 'range'){
              jQuery('.luceneInfoMain div').removeClass('displayBlock');
              jQuery('.luceneInfoMain &gt; #rangeSearches').removeClass('displayNone');
              jQuery('.luceneInfoMain &gt; #rangeSearches').addClass('displayBlock');
              jQuery('#luceneID\\:luceneID\\:range').addClass('ui-state-selected');
  </code></pre>
  
  <p>Primefaces code below each item on the p:menuitem should make display the page on their right:</p>
  
  <pre><code>    &lt;s:div styleClass="w30p floatL inlineBlock"&gt;
      &lt;s:div styleClass="inlineBlock marB10 floatL w100p"&gt;
          &lt;a4j:form id="luceneID"&gt;
              &lt;p:menu id="luceneMenu" keepOpen="true"&gt;
                  &lt;p:submenu label="Supported" styleClass="fontBold"&gt;
                      &lt;p:menuitem id="wildcard" styleClass="ui-state-selected"
                          value="Wildcard Searches" onclick="ShowLuceneInfo('wildcard')" /&gt;
                      &lt;p:menuitem id="fuzzy" value="Fuzzy Searches" 
                          onclick="ShowLuceneInfo('fuzzy')" /&gt;
                      &lt;p:menuitem id="proximity" value="Proximity Searches"
                          onclick="ShowLuceneInfo('proximity')." /&gt;
                      &lt;ui:remove&gt;
                      &lt;p:menuitem id="range" value="Range Searches"
                          onclick="ShowLuceneInfo('range')" /&gt;
                      &lt;p:menuitem id="boosting" value="Boosting a Term"
                          onclick="ShowLuceneInfo('boosting')" /&gt;
                      &lt;/ui:remove&gt;
                      &lt;p:menuitem id="boolean" value="Boolean Operators"
                          onclick="ShowLuceneInfo('boolean')" /&gt;
                      &lt;p:menuitem id="grouping" value="Grouping"
                          onclick="ShowLuceneInfo('grouping')" /&gt;
                  &lt;/p:submenu&gt;
              &lt;/p:menu&gt;
          &lt;/a4j:form&gt;
      &lt;/s:div&gt;
  
  &lt;s:div styleClass="inlineBlock floatL w100p"&gt;
          &lt;a4j:form&gt;
              &lt;p:menu keepOpen="true"&gt;
                  &lt;p:submenu label="Not Supported" styleClass="fontBold"&gt;
                      &lt;p:menuitem id="escape" value="Escaping Special Characters"
                          onclick="ShowLuceneInfo('escape')" /&gt;
                  &lt;/p:submenu&gt;
              &lt;/p:menu&gt;
          &lt;/a4j:form&gt;
      &lt;/s:div&gt;
  &lt;/s:div&gt;
  
  &lt;s:div styleClass="floatL w69p marL1p luceneInfoMain"&gt;
      &lt;rich:panel id="wildcardSearches" styleClass="marB10"&gt;
          &lt;f:facet name="header"&gt;
              &lt;s:div styleClass="panelHead inlineBlock"&gt;
                  &lt;s:span styleClass="breadCrumbText floatL marL5"&gt;
                      &lt;h:outputText value="Wildcard Searches"&gt;&lt;/h:outputText&gt;
                  &lt;/s:span&gt;
              &lt;/s:div&gt;
          &lt;/f:facet&gt;
  
          &lt;s:div&gt;
              &lt;p class="marB10"&gt;Supported wildcards are *, which
              matches any character sequence and ?, which matches any single
              character. Note this query can be slow, as it needs to iterate over
              many terms.&lt;/p&gt;
              &lt;p class="marginBottomTen"&gt;In order to prevent extremely slow
              WildcardQueries, a Wildcard term should not start with one of the
              wildcards * or ?.&lt;/p&gt;
  
              &lt;rich:dataTable value="#{luceneSyntax.getWildcardSearches()}"
                  var="_row" rowKeyVar="mainRowKey" rowClasses="odd-row, even-row"
                  styleClass="marB10 w100p height100"&gt;
  
                  &lt;rich:column width="20%"&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader1()}"
                              styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(0)}" escape="false" styleClass="txtAC fontBold" /&gt;
                  &lt;/rich:column&gt;
  
                  &lt;rich:column width="50%"&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader2()}" styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(1)}" escape="false" styleClass="txtAL valignT" /&gt;
                  &lt;/rich:column&gt;
  
                  &lt;rich:column width="30%"&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader3()}"
                              styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(2)}" escape="false" styleClass="txtAL valignT"/&gt;
                  &lt;/rich:column&gt;
  
              &lt;/rich:dataTable&gt;
          &lt;/s:div&gt;
      &lt;/rich:panel&gt;
  
      &lt;rich:panel id="fuzzySearches"
          styleClass="marB10 displayNone"&gt;
          &lt;f:facet name="header"&gt;
              &lt;s:div styleClass="panelHead inlineBlock"&gt;
                  &lt;s:span styleClass="breadCrumbText floatL marL5"&gt;
                      &lt;h:outputText value="Fuzzy Searches"&gt;&lt;/h:outputText&gt;
                  &lt;/s:span&gt;
              &lt;/s:div&gt;
          &lt;/f:facet&gt;
  
          &lt;s:div&gt;
              &lt;p class="marB10"&gt;Fuzzy searching will find a word even
              if it is misspelled. This can be useful when you are searching text
              that may contain typographical errors.&lt;/p&gt;
  
              &lt;rich:dataTable value="#{luceneSyntax.getFuzzySearches()}"
                  var="_row" rowKeyVar="mainRowKey" rowClasses="odd-row, even-row"
                  styleClass="marB10 w100p height100"&gt;
  
                  &lt;rich:column&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader1()}"
                              styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(0)}" escape="false" styleClass="txtAC fontBold"/&gt;
                  &lt;/rich:column&gt;
  
                  &lt;rich:column&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader2()}"
                              styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(1)}" escape="false" styleClass="txtAL valignT"/&gt;
                  &lt;/rich:column&gt;
  
                  &lt;rich:column&gt;
                      &lt;f:facet name="header"&gt;
                          &lt;h:outputText value="#{luceneSyntax.getColumnHeader3()}"
                              styleClass="fontBold"&gt;&lt;/h:outputText&gt;
                      &lt;/f:facet&gt;
  
                      &lt;h:outputText value=" #{_row.get(2)}" escape="false" styleClass="txtAL valignT"/&gt;
                  &lt;/rich:column&gt;
  
              &lt;/rich:dataTable&gt;
          &lt;/s:div&gt;
      &lt;/rich:panel&gt;
  </code></pre>