为什么 remoteCommand 操作呈指数增长？答案

【问题标题】：Why remoteCommand action grows exponentially?为什么 remoteCommand 操作呈指数增长？
【发布时间】：2016-05-11 10:00:20
【问题描述】：

我正在使用 primefaces RemoteCommand 组件 vie jquery 从 html 表格单元格调用方法。但是，当我更新面板 remoteCommand 操作时，会调用多个方法。增长曲线呈指数增长。在第一个动作中调用一次，在第二个中调用两次，在第三个中调用四次，依此类推。这是什么原因，我该如何解决这个问题？

<p:panelGrid columns="1" columnClasses="ui-grid-col-12" layout="grid" styleClass="ui-panelgrid-blank" 
             style="border:0px none; background-color:transparent;">

    <p:panel  id="tablePanel" header="#{courseConstraintBean.selectedCourse == null ? 'SEÇİLİ DERSİN ' : 
                                        (courseConstraintBean.selectedCourse.courseNameWithClass)} 
              HAFTALIK DERS TABLOSU" 
              style="margin: 0 auto; min-width: 600px; margin-top: 2%;">

        <p:remoteCommand name="sendHourOrDay" actionListener="#{courseConstraintBean.changeLocationHourOrDayCondition(param.id)}" update="form:tablePanel"/>

        <p:remoteCommand name="sendLocation" actionListener="#{courseConstraintBean.changeLocationCondition( param.hour, param.day)}" update="form:tablePanel"/>

        <script>
            $(document).ready(function () {
                $('td').click(function () {
                    sendLocation([{name: 'day', value: $(this).attr('data-day')}, {name: 'hour', value: $(this).attr('data-hour')}]);
                });
            });

            $(document).ready(function () {
                $('th').click(function () {
                    sendHourOrDay([{name: 'id', value: $(this).attr('data-id')}]);
                });
            });

        </script>


        <p:messages id="classCourseChartMessage" showDetail="false" autoUpdate="false" closable="true" style=" margin-left: 2%; margin-right: 2%" />


        <p:panel style="margin-left: 2%; margin-right: 2%; margin-top: 1%; margin-bottom: 0%; min-width: 550px; background-color: #F6FFFF">

            <table width="100%" align="center" style="margin: 0px;">
                <div id="head_nav">
                    <tr>
                        <th style="width: 16%; padding: 10px" data-id="times">DERSLER</th>
                        <th style="width: 12%;" data-id="d1">PZT</th>
                        <th style="width: 12%;" data-id="d2">SAL</th>
                        <th style="width: 12%;" data-id="d3">ÇARŞ</th>
                        <th style="width: 12%;" data-id="d4">PERŞ</th>
                        <th style="width: 12%;" data-id="d5">CUM</th>
                        <th style="width: 12%;" data-id="d6">CMT</th>
                        <th style="width: 12%;" data-id="d7">PZR</th>
                    </tr>
                </div>  

                <tr>
                    <th data-id="h1">1. Ders</th>  
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 0)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="0">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 1)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="1">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 2)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="2">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 3)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="3">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 4)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="4">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 5)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="5">1</td>
                    <td style="background-color: #{courseConstraintBean.getLocationColorOfSelectedCourse(0, 6)}; font-size: 10px; color:#A8B4BB" data-hour="0" data-day="6">1</td>
                </tr>

【问题讨论】：

您是否检查过 jQuery 'click' 处理程序是否被多次调用？如果是这样，那就是问题所在。可能是多次添加？
可能是，如果是我该怎么办？
确保没有多次添加？
怎么样？我不太了解前端。
先检查是否被多次添加。如何？通过在javascript中添加console.log，或使用带有调试选项的浏览器开发工具

标签： jquery jsf primefaces

【解决方案1】：

您的click 事件似乎绑定了多次。这可能是因为您正在更新自己的包含脚本的p:panel。（这应该不是问题，因为您使用的是$(document).ready(...)）。
但只是为了解决事件的多重绑定，您可以使用 JQuery 的unbind()。

<script>
 $(document).ready(function () {
      $('td').unbind('click');
      $('td').click(function () {
         ...
      });
 });
</script>

但请记住，直接使用标签名称（如$('TD'), $('TR')...）绑定/取消绑定事件也会影响 JSF/Primefaces 生成的其他标签。

所以我建议你通过 CSS 类选择器来绑定事件，例如：

<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>
<td class="clickable-cell">...</td>

<script>
$('.clickable-cell').click(...);
</script>

【讨论】：