JavaScript на страницах с данными - PullRequest
Новая
       97

JavaScript на страницах с данными

0 голосов
/ 04 октября 2019

На самом деле я работаю со следующей таблицей данных:
Пример базы данных 

<table aria-describedby="dataTable_info" cellspacing="0" class="table table-hover dataTable" id="dataTable" role="grid" style="width:100%;" width="100%">
                        <thead>
                            <tr>
                                <th>{{'fsaGeneralPlan.table.Auditors'|trans({}, 'FSABundle')}}</th>
                                <th>{{'fsaGeneralPlan.table.Audits'|trans({}, 'FSABundle')}}</th>
                                <th>{{'fsaGeneralPlan.table.Areas'|trans({}, 'FSABundle')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for audit in auditsByArea %}
                            {% set myArray = audit.Audits|split(',') %}
                            {% set AuditsStatus = audit.AuditsStatus|split(',') %}
                                    <tr>
                                        <td>{{ audit.Auditor }}</td>
                                        <td>
                                        {# {% set long = numberOfAudits|length + 2  %} #}
                                        {# <h1>{{ long }}</h1> #}
                                            {% for i in 0..3 %}
                                            {% set e = i + 1 %}
                                            <a  title="{{ AuditsStatus[i] }}" data-toggle="modal" data-target="#auditModal" class="btn btn-outline-primary btn-sm auditButton {{ AuditsStatus[i] }}" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}"  data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton">{{'w' ~ e }}</a>

                                            {# <input  class ="auditButton {{ AuditsStatus[i] }} mx-2" value="{{'W' ~ i }}" href="" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}" data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton" type='text' readonly ></input> #}
                                            {% endfor %}
                                        </td>
                                        <td>{{ audit.area_name }}</td>
                                    </tr> 
                            {% endfor %}
                        </tbody>
                    </table>


В этой таблице в каждом квадрате есть кнопка для открытиямодальный при нажатии кнопки.
Для этого я использую java-скрипт, чтобы открыть модальный: 

    $(function () {
                    $('.auditButton').on('click',function(){
                        //activar modal de waiting
                        $('#waitingModal').modal('show');
     });


Проблема в том, что он работает, когда я нажимаю любойAuditButton первой страницы таблицы данных.
Если я изменю страницу в таблице данных и нажму одну кнопку, она не будет работать.

1 Ответ

0 голосов
/ 04 октября 2019

При присоединении событий к ячейкам в таблице, управляемой DataTables, вы должны быть осторожны, как это делается. Поскольку DataTables удаляет узлы из DOM, события, применяемые с помощью прослушивателя статических событий, могут не иметь возможности связать себя со всеми узлами в таблице. Чтобы преодолеть это, просто используйте ссылку параметров прослушивателя делегированных событий jQuery: https://datatables.net/examples/advanced_init/events_live.html

...