jQuery .change（function ..）在DataTables第2页或11行之后不起作用

Question

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

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

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

我已经搜索了整个互联网，但我得到了一些与此相关的解决方案，但是在我的情况下我无法做到这一点，我需要帮助，如何使其在我的情况下起作用，我的问题与我发布的链接相同，但是我无法在这里表演，

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"); ?>

我唯一想做的就是每当我选中该脚本应运行的复选框时，但目前仅在datatable的第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在.on更改。 如果您使用$(document).on... ，它将检查页面上任何位置的input[name=my-checkboxtt]更改。

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