MDL复选框功能MaterialCheckbox.check（）不适用于ajax内容

Question

I am working with MDL Checkbox where i need to delete all values at once. As i did some research and looks like old method is deprecated : Deprecations for MDL Data Table Checkbox and mdl-data-table--selectable can't be used anymore.

HTML Code:

  <div class="load_customer">
      <table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--7-col-phone">
      <thead>
        <tr>
        <th>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" id="table-header" for="table-input">
                <input type="checkbox" id="table-input" class="mdl-checkbox__input" />
              </label>
        </th>
        <th>Sr. No</th>
         <th>Name</th>
         <th>Gender</th>
         <th>Date of Birth</th>
        <th>Anniversary</th>
       <th>Address</th>
       <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <?php
      $i=1;
      $select = $pdo->query("SELECT * FROM `accounts` ORDER BY `id` DESC");
      while($fetch = $select->fetch()){
      ?>
        <tr>
            <td>
             <label class="mdl-checkbox child_checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" data="<?php echo $fetch['id'];?>" for="row[<?php echo $i;?>]">
                <input type="checkbox" id="row[<?php echo $i;?>]" class="mdl-checkbox__input" />
            </label>
            </td>
            <td><?php echo $i;?></td>
          <td><?php echo $fetch['name'];?> </td>
          <td><?php echo $fetch['gender'];?></td>
          <td><?php echo $fetch['dob'];?></td>
          <td><?php echo $fetch['anniversary'];?></td>
          <td><?php echo $fetch['address'];?></td>
          <td><?php echo $fetch['phone'];?></td>
        </tr>
       <?php
       $i++;
        }
       ?>
      </tbody>
    </table>
    </div>

So after adding it manually it works fine until i load table with ajax. Then it all stops working. I am able to check main checkbox #table-header, but function which checks all checkboxes (MaterialCheckbox.check()) does not works anymore. I checked console & there are no errors in console.

Javascript Code

var arr = [];
$(document).on("click","#table-header input",function() {

    var all_elements = document.querySelectorAll('.child_checkbox');

        for(var i=0, n=all_elements.length; i<n; i++){
            var element = all_elements[i];

            if($('#table-header input').is(":checked")) {

                element.MaterialCheckbox.check();

                var ids = element.getAttribute("data");
                arr.push(ids);

        }
          else {
                element.MaterialCheckbox.uncheck();

                var removeItem = element.getAttribute("data");
                arr = $.grep(arr, function(value) {
                return value != removeItem;
                });
          }
        }

    });

I am using componentHandler.upgradeAllRegistered() and Checkbox is working fine, but it does not loop through all checkboxes.

$.post("load_customer.php",function(data){
            $(".load_customer").html(data);
            componentHandler.upgradeAllRegistered();            
    });

Please help me with this.Thanks.