jQuery 和 f:ajax 之间的冲突答案

【问题标题】：Conflict between jQuery and f:ajaxjQuery 和 f:ajax 之间的冲突
【发布时间】：2016-07-09 14:40:26
【问题描述】：

当我点击提交按钮时，我的 jQuery 函数永远不会被调用。

不过，如果我删除 h:commandButton 处的 f:ajax 行，jQuery 会检测到点击。

我怎样才能使它与 f:ajax 和我的 jQuery 函数一起工作？

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");
}); });

【问题讨论】：

查看呈现的响应。提交按钮的 id 应该在前面加上相应的父组件的 id，例如 form:submit-buttom（除非与 <h:form> 关联的 prependId 设置为 false，这反过来又不推荐）。
我已经尝试过使用form:submit-buttom 语法。正如我所说，只有当我删除 <f:ajax> 行时，jQuery 才会检测到点击。看起来问题来自 ajax...
为什么不用<h:commandButton>的onclick属性来调用js函数呢？

标签： jquery ajax forms jsf

【解决方案1】：

我会写这个作为评论，但它太长了，所以我把它写在这里作为答案。

我猜你之前有一个 JS 错误：

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

因此，该 JS-ERROR 之后的每个 JS 代码都将不起作用。

可能的原因可能是 xhtml 的错误配置。我假设您的 JSF-Ajax 调用也不起作用，如果您没有在 xhtml 中包含 <h:head></h:head>，就会发生这种情况。

必须包含<h:head></h:head>标签才能使ajax正常工作。

在您的情况下发生的情况是：您正在尝试发出 ajax 请求，这会失败，因为 JSF 无法将 jsf.js 加载到您的 xhtml 标头，这会导致 JavaScript 错误，并且此错误之后的所有事情都不会无法正常工作。

【讨论】：