JQuery .change（function ..）がDataTablesで機能していない2ページ目以降の行数

Question

各行にデータテーブルとチェックボックスを使用していますが、jqueryは2番目のページで動作しません。 2ページ目のスクリプトにジャンプしても、最初の10行しかアラートが呼び出されなかった場合でも動作します。私は自分のコードを見て共有していると私はそれがすべてのページですべての行のために働くように何かが不足していることを私に教えてください。ここ

は私がthisのように関連するいくつかの解決策を得たが、私はすることができませんインターネットALLOVER検索しました私は、データを表示するために使用していますテーブル、

 <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ページのみで作業しています。私はすべてのページでスクリプトを実行したいと思います。私は初心者レベルで、これで本当に頑張っています。あなたの助けが必要です、ありがとう。

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

    }); 
}); 

jQueryの変更を監視.onコントロール前にセレクタ。 $(document).on...を使用している場合は、input[name=my-checkboxtt]の変更がページのどこにあるかを確認します。

$('.table-responsive').on(を使用して絞り込むと、jqueryはtable-responsive要素の入力の変更を確認するだけで済みます。これは、パフォーマンスの問題や悪い副作用を取り除くのに役立ちます。