JavaScript 在数据表页面中

Question

实际上我正在处理下一个数据table:
Datatabel example

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

其中 table 每个方块都是一个按钮，当单击该按钮时会打开一个模式。
为此，我使用 java 脚本打开模式：

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

问题是当我点击数据第一页的任何 AuditButton 时它才起作用table。
如果我更改数据中的页面table，然后单击一个按钮，它不起作用。

Answer 1

将事件附加到由 DataTables 控制的 table 中的单元格时，您需要注意它是如何完成的。由于 DataTables 从 DOM 中删除了节点，因此使用静态事件侦听器应用的事件可能无法将自身绑定到 table 中的所有节点。要克服这个问题，只需使用 jQuery 委托事件侦听器选项 link ：https://datatables.net/examples/advanced_init/events_live.html

JavaScript 在数据表页面中

JavaScript in datatables pages

javascript

datatables

symfony-2.8