当点击表格内的任何地方时，primefaces commandbutton在html表内触发actionlistener

Question

我有一个HTML表，其中包含几个primefaces命令按钮，每个命令按钮都有自己的actionListener =“＃{}”，无论何时我在表格内单击任何地方，第一个渲染的commandbutton的actionListener都会触发。为什么会发生这种情况/如何解决？

<p:panelGrid columns="4" layout="grid">
    <p:outputPanel>
        <p:outputLabel id="technicalApprovalLabel" title="" styleClass="borderIcons">
            <i class="#{ cc.attrs.object.techApprover == 0 ? 'Blue' : cc.attrs.object.techApprover > 0 ? 'Green' : 'BoldGray' } Fs60 fa fa-gears"></i>
        </p:outputLabel>
        <p:tooltip id="toolTipTechnicalApprovalApproved" for="technicalApprovalLabel" value="Technical Approver - #{ cc.attrs.object.techName }" rendered="#{ cc.attrs.object.techApprover > 0 }"/>
        <p:tooltip id="toolTipTechnicalApprovalRequired" for="technicalApprovalLabel" value="Technical Approval" rendered="#{ cc.attrs.object.techApprover == 0 }"/>
        <p:tooltip id="toolTipTechnicalApprovalNotRequired" for="technicalApprovalLabel" value="Technical Approval Not Required" rendered="#{ cc.attrs.object.techApprover == -1 }"/>
    </p:outputPanel>

    <p:outputPanel>
        <p:outputLabel id="salesApprovalLabel" title="" styleClass="borderIcons">
            <i class="#{ cc.attrs.object.salesApprover == 0 ? 'Blue' : cc.attrs.object.salesApprover > 0 ? 'Green' : 'BoldGray' } Fs60 fa fa-tags"></i>
        </p:outputLabel>
        <p:tooltip id="toolTipSalesApprovalApproved" for="salesApprovalLabel" value="Sales Approver - #{ cc.attrs.object.salesName }" rendered="#{ cc.attrs.object.salesApprover > 0 }"/>
        <p:tooltip id="toolTipSalesApprovalRequired" for="salesApprovalLabel" value="Sales Approval" rendered="#{ cc.attrs.object.salesApprover == 0 }"/>
        <p:tooltip id="toolTipSalesApprovalNotRequired" for="salesApprovalLabel" value="Sales Approval Not Required" rendered="#{ cc.attrs.object.salesApprover == -1 }"/>
    </p:outputPanel>

    <p:outputPanel>
        <p:outputLabel id="financeApprovalLabel" title="" styleClass="borderIcons">
            <i class="#{ cc.attrs.object.financialApprover == 0 ? 'Blue' : cc.attrs.object.financialApprover > 0 ? 'Green' : 'BoldGray' } Fs60 icon-chart"></i>
        </p:outputLabel>
        <p:tooltip id="toolTipFinanceApprovalApproved" for="financeApprovalLabel" value="Finance Approver - #{ cc.attrs.object.financeName }" rendered="#{ cc.attrs.object.financialApprover > 0 }"/>
        <p:tooltip id="toolTipFinanceApprovalRequired" for="financeApprovalLabel" value="Finance Approval" rendered="#{ cc.attrs.object.financialApprover == 0 }"/>
        <p:tooltip id="toolTipFinanceApprovalNotRequired" for="financeApprovalLabel" value="Finance Approval Not Required" rendered="#{ cc.attrs.object.financialApprover == -1 }"/>
    </p:outputPanel>

    <p:outputPanel>
        <p:outputLabel id="executiveApprovalLabel" title="" styleClass="borderIcons">
            <i class="#{ cc.attrs.object.execApprover == 0 ? 'Blue' : cc.attrs.object.execApprover > 0 ? 'Green' : 'BoldGray' } Fs60 fa fa-university"></i>
        </p:outputLabel>
        <p:tooltip id="toolTipExecutiveApprovalApproved" for="executiveApprovalLabel" value="Executive Approver - #{ cc.attrs.object.execName }" rendered="#{ cc.attrs.object.execApprover > 0 }"/>
        <p:tooltip id="toolTipExecutiveApprovalRequired" for="executiveApprovalLabel" value="Executive Approval" rendered="#{ cc.attrs.object.execApprover == 0 }"/>
        <p:tooltip id="toolTipExecutiveApprovalNotRequired" for="executiveApprovalLabel" value="Executive Approval Not Required" rendered="#{ cc.attrs.object.execApprover == -1 }"/>
    </p:outputPanel>

    <!-- 2nd row -->

    <p:outputPanel rendered="#{ cc.attrs.object.techApprover == 0 }">
        <p:commandButton styleClass="GreenBack" icon="fa fa-check Fs16 White" actionListener="#{ cc.attrs.object.techApprove() }" id="TechnicalApprovalmessage" update="TechnicalApprovalGrowl" />
        <p:commandButton styleClass="RedBack" icon="fa fa-close Fs16 White" onclick="PF('techRejectionDialog').show();"/>
        <p:growl id="TechnicalApprovalGrowl" for="TechnicalApprovalmessage" life="6000" />
    </p:outputPanel>

    <p:outputPanel rendered="#{ cc.attrs.object.salesApprover == 0 }">
        <p:commandButton styleClass="GreenBack" icon="fa fa-check Fs16 White" actionListener="#{ cc.attrs.object.salesApprove() }" id="SalesApprovalmessage" update="SalesApprovalGrowl" />
        <p:commandButton styleClass="RedBack" icon="fa fa-close Fs16 White" onclick="PF('salesRejectionDialog').show();"/>
        <p:growl id="SalesApprovalGrowl" for="SalesApprovalmessage" life="6000" />
    </p:outputPanel>

    <p:outputPanel rendered="#{ cc.attrs.object.financialApprover == 0 }" >
        <p:commandButton styleClass="GreenBack" icon="fa fa-check Fs16 White" actionListener="#{ cc.attrs.object.financeApprove() }" id="FinancialApprovalmessage" update="FinancialApprovalGrowl" />
        <p:commandButton styleClass="RedBack" icon="fa fa-close Fs16 White" onclick="PF('financeRejectionDialog').show();"/>
        <p:growl id="FinancialApprovalGrowl" for="FinancialApprovalmessage" life="6000" />
    </p:outputPanel>

    <p:outputPanel rendered="#{ cc.attrs.object.execApprover == 0 }" >
        <p:commandButton styleClass="GreenBack" icon="fa fa-check Fs16 White" actionListener="#{ cc.attrs.object.execApprove() }" id="ExecutiveApprovalmessage" update="ExecutiveApprovalGrowl" />
        <p:commandButton styleClass="RedBack" icon="fa fa-close Fs16 White" onclick="PF('execRejectionDialog').show();"/>
        <p:growl id="ExecutiveApprovalGrowl" for="ExecutiveApprovalmessage" life="6000" />
    </p:outputPanel>
</p:panelGrid>