Jquery 除第1页外，JS代码未在DataTable中调用

我开发了一个Django项目，有一个使用DataTable（Jquery）的应用程序 表中的一列是带有JS脚本的链接

第一页全部完成，下一页完成

我读了一篇关于这个的帖子，@Halcyon解释了这个问题并提出了解决方案 如果我理解的话，该事件将添加到第一次加载时出现的DOM元素中，但在使用分页时不会添加

但是我使用.on（）来处理这个问题 我不知道该怎么办

{% extends 'layouts/base.html' %}
{% load randomization_extras %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}{% endblock %}
{% block title %}Randomization | Intense TBM{% endblock %}
{% block content %}

<div class='container'>
    <br>
    <br>
        <div style="text-align: center;">
            <h1>RANDOMIZATION INTENSE TBM STUDY ANRS 12398</h1>
            <br>
            <p style="color:#007bff;">The randomization procedure should only be performed by trained and authorized individuals. If there is a problem call the [National Coordination phone number], or [International coordination phone number].</p>
        </div>
    <table id="table_id" class="table  table-stripped table-hover" style="width:100%">
        <thead>
            <tr>
                <th>Patient code</th>
                <th>TB Treatment</th>
                <th>Batch number</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for patient in preincluded %}
            <tr>
                <td>{{patient.pat_num}}</td>
                <td>
                    {{ patient.tbc_treatment }}
                </td>
                <td>                
                    {{ patient.asp_treatment }}
                </td>

                <td>
                {% if not patient.tbc_treatment %}
                    <a data-modal data-target="{{ patient.pat_num|randomizable }}" class="randomize" href="{% url 'randomization:randomisation_edit'  %}?patient={{patient.pat_num}}">Randomize</a>
                    {% endif %}                    
                </td>
            </tr>   
            {% endfor %}
        </tbody>
    </table>
    {% if liste_existe is not None and not liste_existe %}
        <p>No records found</p>
    {% endif %}
</div>

<!-- Modal -->
<div class="modal fade" id="randomizationprevent" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Intense TBM Randomization</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p style="color:red;">This patient can not be randomized because no drugs available at your pharmacy. Please contact your CTU.</p>
            </div>
            <div class="modal-footer">
                <button id="close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block extrabody %}
<!--DataTable-->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<!--DataTable-->

<!--Modal-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Modal-->
<script>
    $(document).ready( function () {
        $('#table_id').DataTable({
            "bPaginate": true,
            "oLanguage" : {
                "sInfoEmpty" : "Showing 0 to 0 of 0 items",
            },      
            "bSort" : true,
            "bFilter" : true,
            "iDisplayLength": 5,
            lengthMenu: [5, 10],
        });

        $('a[data-modal]').on('click', function(event) {
        var randomizable = $(this).data('target');
            if(randomizable === 'False'){
                $('#randomizationprevent').modal('show')
            }

        });

        $("body").on('click','#close',function(event){
            $(this).modal('close')
        });

    } );
</script>
{% endblock %}

---

我这样做可以解决我的问题：

<script>
    $(document).ready( function () {

        var table = $('#table_id').DataTable({lengthMenu: [5, 10],});
        table.on( 'draw', function () {
            $('a[data-modal]').on('click', function(event) {
                var randomizable = $(this).data('target');

                if(randomizable === 'False'){
                    // alert('Patient non randomizable');
                    $('#randomizationprevent').modal('show')
                }
            });
        });
        $("body").on('click','#close',function(event){
            $(this).modal('close')
        });
    } );
</script>

$（文档）.ready（函数（）{
var table=$（'#table_id'）.DataTable（{lengthmenus:[5,10]，}）；
表.关于（'draw'，函数（）{
$（'a[data modal]'）。在（'click'，函数（事件）{
var randomizable=$（this.data（'target'）；
如果（可随机化=='False'）{
//警报（“患者不可随机化”）；
$（“#随机化防止”）.modal（'show'）
}
});
});
$（“正文”）。在（'单击'，'关闭'，函数（事件）{
$（this.modal（'close'））
});
} );

我尝试了draw事件，但它不起作用

<script>
    $(document).ready( function () {

        var table = $('#table_id').DataTable({lengthMenu: [5, 10],});
        table.on( 'draw', function () {
            $('a[data-modal]').on('click', function(event) {
                var randomizable = $(this).data('target');

                if(randomizable === 'False'){
                    // alert('Patient non randomizable');
                    $('#randomizationprevent').modal('show')
                }
            });
        });
        $("body").on('click','#close',function(event){
            $(this).modal('close')
        });
    } );
</script>