Question

我正在使用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>

Answer 1

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

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

但请记住，使用TAG名称$('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>

为什么remoteCommand动作呈指数级增长？

1 个答案: