工作jsfiddle代码不适用于jsf 2.2

Question

我正面临一个与javascript不同的问题。（我对此比较陌生）。 我有一个html5 css和javascript的代码片段在jsfiddle中工作正常。 这是链接：Jsfiddle Link

代码： HTML - ＆GT;＆GT;＆GT;

<div class="form-group">
    <div class="input-group">
        <div class="btn-group btn-group-justified basu-radio"> 
            <a class="btn btn-info btn-sm active" data-toggle="sex" data-title="m">Male</a>
            <a class="btn btn-info btn-sm basu-radio-notActive" data-toggle="sex" data-title="f">Female</a>

        </div>
        <input type="hidden" name="sex" id="sex" />
    </div>
</div>

CSS - ＆gt;＆gt;＆gt;

.basu-radio .basu-radio-notActive {
    color: #3276b1;
    background-color: #fff;
}

JS - ＆GT;＆GT;＆GT;

$('.basu-radio a').on('click', function () {
    var sel = $(this).data('title');
    var tog = $(this).data('toggle');
    $('#' + tog).prop('value', sel);

    $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('basu-radio-notActive');

    $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('basu-radio-notActive').addClass('active');
});

问题是当我尝试在我的JSF页面中使用它时。 我已检查并确认所有文件都已正确链接。

这是jsf代码：

<div class="container">
    <div class="row">
        <form role="form" method="post" jsf:id="signup-form" autocomplete="off">
            <div class="col-md-4 pull-right">
                <div class="form-wrap">
                    <h1 class="text-center">Sign up</h1>

                    <div class="form-group">
                        <label for="email" class="sr-only">Email</label>
                        <div class="input-group" data-toggle="tooltip" data-placement="left" data-original-title="Please enter your e-mail id" >
                            <span class="input-group-addon"><i class="fa fa-envelope fa-fw text-primary"></i></span>
                            <div class="required-field-block">
                                <input type="email" jsf:value="#{index.email}" name="email" jsf:id="email" class="form-control" 
                                       placeholder="E-mail ID" />
                                <div class="required-icon">
                                    <div class="text">*</div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="sr-only">Password</label>
                        <div class="input-group" data-toggle="tooltip" data-placement="left" data-original-title="Please enter your password" >
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw text-primary"></i></span>
                            <div class="required-field-block">
                                <input type="password" jsf:value="#{index.password}" jsf:id="password" class="form-control" placeholder="Password" />
                                <div class="required-icon">
                                    <div class="text">*</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="btn-group btn-group-justified basu-radio"> 
                                <a class="btn btn-info btn-sm active" data-toggle="signup-form:sex" data-title="m">Male</a>
                                <a class="btn btn-info btn-sm basu-radio-notActive" data-toggle="signup-form:sex" data-title="f">Female</a>
                            </div>
                            <input type="hidden" jsf:id="sex" />
                        </div>
                    </div>
                    <button type="submit" jsf:id="btn-login" jsf:action="#{index.login()}" class="btn btn-primary btn-lg btn-block">
                        <span><i class="fa fa-check-circle fa-fw"></i> Sign up</span>
                        <f:ajax execute="@form" render=":signup-form" />
                    </button>
                </div>
            </div> <!-- /.col-xs-12 -->
            <div class="col-md-8 pull-left">
                <hr />
                <h3 class="text-muted">
                    Welcome, #{index.email}
                </h3>
                <hr />
            </div>
        </form>
    </div> <!-- /.row -->
</div> <!-- /.container -->  

我尝试过使用控制台输出进行基本调试。控制台输出使用jsfiddle中运行的代码，但不使用jsf。 问题是在jsf代码中没有发生切换，而在jsfiddle中。 我正在使用JSF 2.2（Mojarra）glassfish 4.1 java ee7浏览器chrome。 如果您需要更多信息，请与我们联系。任何指针都将非常感激。