Question

我在xhtml文件中有3个单选按钮时遇到问题，当我单击一个单选按钮以调用onclick JS函数时，它将在第一次输入该函数，但是下次我将单击相同的按钮或另一个功能将不会执行。在页面重新加载时选择的单选按钮将正确执行该功能，但是当我选择另一个按钮然后返回到第一个或第三个按钮时，将不会执行JS函数。

以下是xhtml代码的一小部分：

<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:s="http://jboss.org/seam/faces"
          xmlns:p="http://primefaces.org/ui">

<p:outputPanel id="identificationMethod">

    <p:selectOneRadio id="identificationMethodRadio"
                    validator="required"
                    requiredMessage="SELECT CONFIRMATION METHOD"
                    layout="custom"
                    value="#{identificationMethodSelector.identificationMethod}">
        <p:ajax update="identificationMethod" global="false"/>
        <f:selectItems value="#{identificationMethodSelector.identificationMethodList}" />
    </p:selectOneRadio>

    <ui:fragment rendered="#{!hideIdentificationMethodNone and user.enableIdentificationMethodNone}">
        <div>
            <p:radioButton id="identificationMethodNone" for="identificationMethodRadio" itemIndex="5" />
            <h:outputLabel for="identificationMethodNone"
                        value="NOT NOW" />

            <ui:fragment rendered="true">
                <div class="identificationMessage">
                    <div class="spacer" />
                    <span>xxxxxxxxx</span><br />
                    <div class="spacer" />
                </div>
            </ui:fragment>
        </div>
    </ui:fragment>

这里是JS：

    var none = document.getElementById('identificationMethodNone');
    var radioImg = document.getElementById('identificationMethodImage');
    var tel = document.getElementById('identificationMethodTel');

    radioImg.onclick = function (event){
        console.log("CLICK ON IMG");
    };

    none.onclick = function (event){
        console.log("CLICK ON NONE");
    };

   tel.onclick = function (event){
        console.log("CLICK ON TEL");
    };

如您所见，我认为JS没问题，真的很简单的JS，在另一个simbple html文件上试过了，并且工作正常。

在尝试了很多思考后，我发现删除此行代码可以使JS函数正常工作：

<p:ajax update="identificationMethod" global="false"/>

但是删除此行会导致其他问题。如何在不编辑过多XHTML代码的情况下解决此问题？谢谢

Primefaces RadioButton，JS功能不起作用

0 个答案: