jQuery和f:ajax之间的冲突

当我单击submit按钮时，我的jQuery函数从未被调用

尽管如此，如果我删除h:commandButton处的f:ajax行，jQuery会检测到点击

如何使它与我的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>

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

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

我猜在此之前您有一个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错误之后的每一个JS代码都无法工作

可能的原因可能是xhtml配置错误。我假设您的JSF Ajax调用也不起作用，如果您没有在xhtml中包含

，就会发生这种情况

标签必须包含在内，才能使ajax正常工作

在您的案例中发生的情况是：您试图发出一个ajax请求，这失败了，因为JSF无法将JSF.js加载到您的xhtml头中，这会导致一个JavaScript错误，并且在这个错误之后的每一件事情都无法正常工作。

我会将其作为注释来写，但它太长了，所以我将其作为一个答案写在这里

我猜在此之前您有一个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错误之后的每一个JS代码都无法工作

可能的原因可能是xhtml配置错误。我假设您的JSF Ajax调用也不起作用，如果您没有在xhtml中包含

，就会发生这种情况

标签必须包含在内，才能使ajax正常工作

---

在您的案例中发生的情况是：您正在尝试发出一个ajax请求，但由于JSF无法将JSF.js加载到您的xhtml头中而失败，这会导致一个JavaScript错误，并且此错误之后的每件事情都无法正常工作。

查看呈现的响应。submit按钮的id应该在相应父组件id的前面，例如

表单：submit buttom

（除非与

关联的

prependId

设置为false，这反过来是不推荐的）。我已经尝试了

表单：submit buttom

语法。正如我所说，jQuery只在删除

行时检测单击。问题似乎来自ajax…为什么不使用

的

onclick

属性来调用js函数呢？查看呈现的响应。submit按钮的id应该在相应父组件id的前面，例如

表单：submit buttom

（除非与

关联的

prependId

设置为false，这反过来是不推荐的）。我已经尝试了

表单：submit buttom

语法。正如我所说，jQuery只在删除

行时检测单击。问题似乎来自ajax…为什么不使用

的

onclick

属性来调用js函数呢？