jQuery 事件只执行一次 (Primefaces 3.2, JSF 2.2)答案

【问题标题】：jQuery event is executed once only (Primefaces 3.2, JSF 2.2)jQuery 事件只执行一次 (Primefaces 3.2, JSF 2.2)
【发布时间】：2012-06-09 07:11:54
【问题描述】：

我们正在使用 primefaces，jsf。

我有以下数据表：

<p:dataTable var="dataRow"
                first="#{wirkungsgradeEditBean.firstRowIndex}"
                value="#{wirkungsgradeEditBean.wirkgradList}" editable="true"
                id="table" paginator="true"
                rows="#{wirkungsgradeEditBean.rowsPerPage}"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="15,25,35">
                <p:column headerText="#{msg.table_wirkungsgrade_wirk4}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{dataRow.wirk4}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{dataRow.wirk4}" required="true" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column headerText="#{msg.column_head_edit}">
                    <p:rowEditor />
                    <p:commandButton icon="ui-icon-close"
                        rendered="#{wirkungsgradeEditBean.renderDeleteButton}"
                        styleClass="rainstar-button-small-edit"
                        action="#{wirkungsgradeEditBean.btn_deleteEntryClick()}"
                        update=":form:table" widgetVar="delBut" >
                        <f:setPropertyActionListener value="#{dataRow}"
                            target="#{wirkungsgradeEditBean.selectedWirkgrad}" />
                    </p:commandButton>
                </p:column>
                <p:ajax event="rowEdit"
                    listener="#{wirkungsgradeEditBean.btn_editEntryClick}"
                    update=":form:table" />
                <p:ajax event="rowSelect"
                    listener="#{wirkungsgradeEditBean.selectRo()}"
                    update=":form:table" />
            </p:dataTable>

现在我想在按下编辑按钮（铅笔符号）时切换删除按钮。我使用以下 jquery 构造来做到这一点：

$(document).ready(function(){
        $("span.ui-row-editor span").click(function(){
            $(this).parent().parent().children("button").toggle();
        });
    });

如果我第一次尝试，一切都很好。但如果我再试一次，切换不会发生。

怎么了？！

【问题讨论】：

标签： jquery jsf primefaces datatable toggle

【解决方案1】：

当您单击编辑按钮时，会进行部分更新，重新创建表并且您的处理程序丢失。通过JSF控制删除按钮更安全，只需在编辑时更新wirkungsgradeEditBean.renderDeleteButton即可。

编辑：另一种选择是使用 on 函数：

$(document).on("click", "span.ui-row-editor span", function(){
  $(this).parent().parent().children("button").toggle();
});

您可以将其微调为更本地化的内容而不是文档，但不受部分更新的影响。

【讨论】：

【解决方案2】：

代替

  $(this).parent().parent().children("button").toggle();

你可以使用

  $(this).parent().siblings("button").toggle();

【讨论】：