Warum RemoteCommand-Aktion exponentiell wächst?

Question

Ich benutze primecefaces RemoteCommand Komponente vie jquery, um Methode aus HTML-Tabellenzellen aufzurufen. Allerdings, wenn ich Panel remoteCommand Aktion Methoden aufrufen mehr als eine. Die Wachstumskurve ist exponentiell. In der ersten Aktion wird einmal, in der zweiten zwei Mal, in der dritten vier Mal und so weiter. Was ist der Grund dafür, und wie kann ich dieses Problem lösen?

<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

Ihr Ereignis click ist mehrfach verbindlich. Dies könnte daran liegen, dass Sie sehr eigene p:panel aktualisieren, die das Skript enthält (dies sollte kein Problem sein, weil Sie $(document).ready(...) verwenden).
Aber nur um die Mehrfachbindungen eines Ereignisses zu lösen, könnten Sie JQuerys unbind() verwenden.

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

Aber denken Sie daran, dass die Bindung/freibleibend das Ereignis TAG-Namen direkt wie $('TD'), $('TR')... mit anderen Tags von JSF/Primefaces auch erzeugt beeinflussen.

Also würde ich Ihnen vorschlagen, die Ereignisse durch CSS-Klasse Wähler zu binden, zum Beispiel:

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