なぜremoteCommandアクションが指数関数的に増加するのですか？

Question

私はprimefaces RemoteCommandコンポーネントを使って、htmlテーブルセルからメソッドを呼び出すjqueryを使用しています。しかし、私がpanel remoteCommandアクションを更新すると、メソッドが複数呼び出されます。成長曲線は指数関数的である。最初のアクションでは1回、2回目は2回、3回目は4回などと呼ばれます。これの理由は何ですか？この問題をどうやって解決できますか？

<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> 

Answer 1

あなたのclickイベントが複数回バインドされているようです。これは、スクリプトが含まれている独自のp:panelを更新しているためです（これは、$(document).ready(...)を使用しているため問題ではありません）。
しかし、イベントの複数のバインディングを解決するには、JQueryのunbind()を使用できます。

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

しかし、結合/ $('TD'), $('TR')...のようなタグ名を使用して直接イベントのバインドを解除するだけでなくJSF/Primefacesによって生成された他のタグに影響を与えることに注意してください。

だから私は、例えば、CSSクラスセレクタでイベントをバインドするために、あなたをお勧めしたい：jQueryの「クリック」ハンドラが複数回呼び出された場合

は

<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>