DataTablesがブートストラップモーダルで正しく初期化されない

Question

DataTablesとBootstrapモーダルに2つの問題があります。 （ユーリが解決しよう）ページ1

後、私はこのテーブルを持っている

1. が動的に構築されたボタンを使用することはできません、それは、AJAX要求によって動的に構築され、データが正しくロードされ、必要なときにテーブルが構築されます。 'Manage'および 'Delete'ボタンにはクラスが設定されています。クリックすると、現在のテーブルの上に別のモーダルが表示されます私が2頁に行くとそれは動かないまるでリスナーがないかのように

   

私はjQueryの下に別のDataTableを初期化する必要がある第二モーダルに初期化しませ

のDataTable（1の発行に関連している可能性が）

は、モーダルで「管理」ボタンが開くはずです。開いたら、別のDataTablesを初期化し、AJAXリクエストからデータを取得する必要がありますが、Chromeデベロッパーツールのネットワークタブでは実行されていません。

問題が発見されました。データテーブルが何らかの理由で初期化されていませんか？ jQueryがそこまで動作します 私がここで間違っていることを理解できませんか？

$(document).ready(function(){ 

     $('.valid-tags').on('click', '.manageAutofixes', function(){ 
      $('.autofixes-modal').modal('show'); 
      $('.autofixes-modal').on('shown.bs.modal', function() { 
      var table = $('.autofixes-table').DataTable({ 
       "ajax": { 
        "url": "/ajax/getValidTags.php", 
        "type": "POST", 
        "data": { 
        ruleID: ruleID, 
        type: 'autofixes' 
        }, 
       }, 
       "columnDefs": [{ 
        "targets": 2, 
        "render": function(data, type, full, meta){ 
         return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>'; 
        } 
       }], 
       destroy: true  
      });   
      })  
     }) 


    }); 

あなたにボタンを解決するために、（ページに含まれています）私のモーダルのHTML

<div class="modal fade autofixes-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static"> 

    <div class="modal-dialog modal-wide"> 

     <div class="modal-content"> 

      <div class="modal-header modal-header-custom"> 
      <input class="ruleID" type="hidden"></input>  
       <button type="button" class="close destroyTable" data-dismiss="modal" aria-hidden="true">x</button> 
       <h4 class="modal-title">Autofixes</h4> 
      </div> 

      <div class="modal-body"> 
      <div class="topBar">      
       <div> 
        <input type="text" class="autofix inputTextStyling">      
       </div> 
      </div> 
      <hr> 
       <table class="table table-striped table-condensed autofixes-table" style="width:100%;"> 
        <thead> 
         <tr> 
          <th>Autofix</th> 
          <th>Manage</th> 
         </tr> 
        </thead> 
        <tbody class="autoFixesTable"> 
        </tbody>      
       </table>       
      </div> 
      <div class="modal-footer">     
       <button type="button" class="btn btn-default destroyTable" data-dismiss="modal">Close</button> 
      </div> 

     </div> 

    </div> 

</div> 

Answer 1

かの問題、ちょうど代表団のこの種の使用：

$('#datatable').on('click', '.btn_class', function(){...}); 

をこれます#datatableコンテナ内で発生するクリックイベントと.btn_class要素に一致し、wi dinamically追加された要素のためにあなたの問題を解決します。

あなたのモーダルの中のDatatableについては、私は通常、リモートモーダルを使ってこれを解決します。

$("#myModal").on("show.bs.modal", function(e) { 
    var link = $(e.relatedTarget); 
    $(this).find(".modal-body").load(link.attr("href")); 
}); 

EDIT：それはあなたがあなたの<div class="modal-body">..</div> htmlコードと相対JSコード（PHP）ファイルに（DATATABLEを初期化するために、そのコード）の両方を入れて、でそれをロードすることを意味して$(document).ready();を使用することを忘れないでください、あなたのmodal-bodyが完全にロードされたときにのみコードが実行されるように、リモートPHPファイルも作成されます。

Answer 2

アクション "クリック"をバインドした後にページ2のボタンが読み込まれるという問題があります。あなたは

はあなたがリモートから自分のモーダルをロードしてくださいデータテーブルオプションfnDrawCallback

fnDrawCallback: function(oSettings) { 
    $('.manageAutofixes').on('click', function(){ 
     $('.autofixes-modal').modal('show'); 
     alert('hi'); 
    } 
}