title: Stop bubbling with primefaces work until form submit
body: <p>I have a button p:commandButton inside the title facet of an p:accordionPanel:</p>
  
  <pre><code>&lt;p:accordionPanel&gt;
      &lt;p:tab titleStyleClass="accTabTitle"&gt;
          &lt;f:facet name="title"&gt;
              &lt;h:panelGrid id="pgClTabTitle" columnClasses="alignLeftFullWidth, clActionLink, alignRight, alignRight"
                  columns="4"&gt;
                  &lt;p:commandButton id="editClButtonId" icon="fa fa-pencil" styleClass="clItemButton" actionListener="#{selectionController.setSelection(curCl)}" update=":detailsFormId" immediate="true" /&gt;
                  &lt;p:commandButton icon="fa fa-trash-o" styleClass="clItemButton" 
                      oncomplete="PF('confirmDeletionDialogVar').show();" /&gt;
              &lt;/h:panelGrid&gt;
          &lt;/f:facet&gt; ...
  </code></pre>
  
  <p>I want to prevent that the tab is expanded or collapsed when on of the commandButtons is clicked:</p>
  
  <pre><code>$(".clItemButton").click(function(event) {
      event.stopPropagation();
  });
  </code></pre>
  
  <p>This work until the form is submitted for instance when the user clicks ok on the deletion dialog open by the 2nd commandButton. After the submitting the tab collapses and expands when the commandButtons are clicked. The javascript isn't executed after this submit.
  Any idea what I am doing wrong?</p>
  
  <p>Regards
  Oli</p>