JQuery .change(function..) 在 DataTables 第二页或超过 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 相关的解决方案，但在我的场景中我无法做到这一点，我需要帮助我如何让它在我的情况下工作，我的问题与我拥有的链接相同已发布，但我无法在这里表演，

footer.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 页上工作，而不是在那之后的任何记录上，我想在每一页上运行脚本，并使用 evert 行，我处于初学者水平，并且在这方面非常努力。需要您的帮助，谢谢。

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 元素内的输入更改。这有助于消除任何性能问题或不良副作用。