Conflict between jQuery and f:ajax

Question

My jQuery function is never called when I click on my submit button.

Nevetheless, jQuery detects the click if I remove the f:ajax line at h:commandButton .

How can I make it work f:ajax and my jQuery function together ?

XHTML:

<h:form>
    <!-- my inputs-->
    <h:commandButton id="submit-button" type="button" value="Confirm" >
        <f:param name="id" value="#{param.id}" /> 
        <f:ajax execute="@form" render="@none" />
    </h:commandButton>
</h:form>

Javascript:

jQuery(document).ready(function() {
jQuery('input[id*="submit-button"]').click(function() {
  console.log("button clicked");
}); });

Answer 1

i would write this as a comment, but its too long, so i write it here as an answer.

i guess you have a JS-Error prior this:

// prior this code you could have a JS Error    
jQuery(document).ready(function() {
    jQuery('input[id*="submit-button"]').click(function() {
      console.log("button clicked");
    });
});

so every JS Code after that JS-ERROR won'T work.

possible cause could be a missConfiguration of xhtml. i assume that your JSF-Ajax calls don't work too, this happens if you don't include <h:head></h:head> in your xhtml.

<h:head></h:head> tag must be included in order for ajax to work properly.

what happens in your case is: you are trying to make an ajax-request, this fails because JSF couldn't load jsf.js to your xhtml header, this cause a JavaScript Error, and every thing after this error won't work properly.