Question

当我点击提交按钮时，我的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");
}); });

Answer 1

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

我猜你之前有一个JS-Error：

// 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的missConfiguration。我假设你的JSF-Ajax调用也不起作用，如果你的xhtml中没有包含<h:head></h:head>，就会发生这种情况。

必须包含

<h:head></h:head>标记才能使ajax正常工作。

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

jQuery和f：ajax之间的冲突

1 个答案: