javascript - JQuery .change(function..) 在 DataTables 第 2 页或第 11 行之后不起作用

Question

我正在使用数据表并在每一行中使用复选框，但 jquery 在第二页上不起作用，当脚本加载时，当转到第二页脚本不起作用时，我只能更改和更新前十行，甚至警报也不起作用t 调用。我正在分享我的代码，看一下，让我知道我在哪里缺少一些东西，以使其适用于任何页面的所有行。

这是我用来显示数据的表格，

       <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Today Appointments</h3>
                    </div>
                    <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover dataTables-example" id="dataTables-example" >
                                <thead>
                                    <tr>
                                        <th>App User</th>
                                        <th>Appointment Id</th>
                                        <th>Client Contact</th>
                                        <th>Gender</th>
                                        <th>Age</th>
                                        <th>Address</th>
                                        <th>Type</th>
                                        <th>To Doctor</th>
                                        <th>Dr City</th>
                                        <th>Dr Phone</th>
                                        <th>Dr Speciality</th>
                                        <th>Description</th>
                                        <th>Transaction</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php foreach($appointments as $d){ ?>
                                    <tr class="odd gradeX">
                                        <td><?php echo $d["email"]; ?></td>
                                         <td><?php echo $d["id"]; ?></td>
                                        <td><?php echo  $d["phone"]; echo ($d["confirm"]=="0")?"":" <i class='fa fa-check-circle text-success'></i>"; ?></td>
                                        <td><?php echo $d["gender"]; ?></td>
                                        <td><?php echo $d["age"]; ?></td>
                                        <td><?php echo $d["address"]; ?></td>
                                        <td><?php echo $d["type"]; ?></td>
                                        <td><?php echo $d["dr_name"]; ?></td>
                                        <th><?php echo $d["dr_city"] ?></th>
                                        <th><?php echo $d["dr_phone"] ?></th>
                                        <th><?php echo $d["category"] ?></th> 
                                        <th><?php echo $d["description"] ?></th>
                                      <td><label class="switch">
  <input type="checkbox" id="<?php echo  $d["id"]; ?>" name="my-checkboxtt"     <?php echo  ($d["transaction"]=='Unpaid')? "" : "checked"; ?> />
<span class="slider round"></span>
</label>
                                        </td>
                                        <td><?php echo $d["app_date"]; ?></td>
                                        <td><?php echo $d["time"]; ?></td>
                                    </tr>
                                 <?php } ?>   
                                </tbody>
                            </table>
                            </div>
                    </div>
                </div>


            </div>

JQuery

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

 var confirm = 'Unpaid';
 $("input[name=my-checkboxtt]").change(function() {  

  alert('toggled');

  if(this.checked) {
   confirm = 'Paid';
  }

id = (this).id;
     $.ajax({
      method: "POST",
      url: "index.php?component=doctor&action=transaction",
      data: { appid: id , value: confirm }
    })
      .done(function( msg ) {

    });
});

});
</script>

我在整个互联网上进行了搜索，我得到了一些相关的解决方案，例如 this但我无法在我的场景中执行此操作，我需要帮助如何使其在我的情况下工作，我的问题与我发布的链接相同，但我无法在这里执行，

页脚.php

<script src="<?php echo ADMIN_THEME ?>js/sb-admin.js"></script>

<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->

    <script>
$(document).ready(function() {
    $('#dataTables-example').dataTable({

 });
$('.dataTables-example').dataTable({

 });

});
</script>

页脚文件是这样包含的，

<?php echo  common::load_view("common","footer"); ?>

我只想要的是，每当我选中复选框时，脚本就应该运行，但目前仅在数据表的第 1 页上运行，而不是在之后的任何记录上运行，我想在每个页面上运行该脚本并使用每个行，我处于初学者水平，并且在这方面非常努力。需要您的帮助，谢谢。

Answer 1

尝试使用 $('.table-responsive').on('change', 'input[name=my-checkboxtt]', function() { 作为您的更改监听器，您当前的监听器可能无法处理在声明时不存在的输入。以这种方式声明应该可以让您监听动态添加的输入的更改。

$('.table-responsive').on('change', 'input[name=my-checkboxtt]', function() {

  alert('toggled');

  if(this.checked) {
   confirm = 'Paid';
  }

  id = (this).id;
     $.ajax({
      method: "POST",
      url: "index.php?component=doctor&action=transaction",
      data: { appid: id , value: confirm }
    })
      .done(function( msg ) {

    });
});

.on 之前的选择器控制 jquery 监视更改的位置。如果您使用 $(document).on... 它将检查页面上任何位置的 input[name=my-checkboxtt] 更改。

使用 $('.table-responsive').on( 缩小范围可以帮助 jquery 知道它只需要检查 table-responsive 内输入的更改元素。这有助于消除任何性能问题或不良副作用。