单击按钮时，jQuery 函数未从 JSF 调用

Question

我有一个 jQuery 文件，其中包含函数。当我的页面加载时，我的脚本就会运行。意味着它被调用。这是我的 jQuery 文件。

(function($){

    var $firstPara = $('p').eq(1);
    $firstPara.hide();

    function checkValidation() {

        var labelElementArray = $("label.mandotary");
        var inputElementArray = $("input.mandotary");
        var selectElementArray = $("select.mandotary");

        $.each(inputElementArray, function(index, element){

            var text = $(element).text();


        }); //end of $.each(inputElementArray, fn)

        $.each(selectElementArray, function(index, element) {

            ////nothing

        }); //end of  $.each(selectElementArray, fn)

    } //end of function checkValidation()

})(jQuery); //end of (function($){}

我有 JSF 表单，其中有按钮。

<h:head>
    <title>Facelet Title</title>
    <h:outputScript library="javascripts" name="jquery.js"  target="body"/>
    <h:outputScript library="javascripts" name="validation.js" target="body"/>

</h:head>

<h:body>

    <h:form id="validationFrom" >

        <h:commandButton id="saveButton"
                         value="Save"
                         onclick="checkValidation()"/>


        <h:commandButton id="cancelButton"
                         value="Cancel" />

    </h:form >

</h:body>

现在，当我单击“保存”按钮时，它说 checkValidation() 函数未定义。为什么？ 我在这里做错了什么？

谢谢

Answer 1

尝试删除

(function($){

和

})(jQuery); //(函数($){}结束


从js文件中

，而是用这个地方包装你的js代码，

$(document).ready(function() {

});

一件事

再编辑

：将其添加到页面的头部，

    <h:outputScript library="primefaces" name="jquery/jquery.js"
        target="head" />
    <h:outputScript target="head">
        $ = jQuery;
    </h:outputScript>

以便在你的jQuery代码中使用$

Answer 2

好吧，除了我刚刚进行的少量谷歌搜索之外，我不知道 JSF 是什么，而且我也不熟悉您正在使用的一些 jQuery 语法。假设您可以像处理任何常规旧 html 页面一样处理 JSF 页面，下面是我的做法...

$(function() {
    // Do any work you want to occur when the DOM is ready here.

    $("#saveButton").click(checkValidation);
}

function checkValidation() {
    // Check validation here
} 

然后删除 JSF 中的 onclick 位。