数据表页面中的JavaScript

Question

实际上，我正在使用下一个数据表：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>

在该表中的每个正方形都是单击按钮以打开模式的按钮。为此，我使用Java脚本打开模式：

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

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

Answer 1

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