オブジェクトのJavascriptがDataTableの行で機能しない

Question

私はアプリケーションでDataTableを実装しましたが、DataTableではjavascriptが機能しないようです。

わかりやすくするために、以下のすべてのコードを添付しました。

ご覧のとおり、ccbtn_action="delete"ビットは存在しますが、グリフコンをクリックするとChrome/IE/FFは何もしたくないようです。

このコードは、DataTableの外部から呼び出されたときに完全に機能します。

何がありますか？動的に生成された要素にJavaScriptが適用されていないということは何ですか？

ありがとうございました！ここで

は動作しませんJavascriptコードです：ここで

$(document).ready(function(){ 

    // Delete Records 

    $('[ccbtn_action="delete"]').on('click', function() { 
     var type = $(this).attr('ccbtn_value_type'); 
     var value = $(this).attr('ccbtn_value_id'); 
     console.log('type=' + type + '&id=' + value); 


     if (confirm('Are you sure you want to PERMANENTLY delete this record? There is NO TURNING BACK!')) { 
      $.ajax({ 
      type: 'POST', 
      url: 'includes/crmcore_action.php?action=cc_delete', 
      data: 'type=' + type + '&id=' + value, 
      success: 
      function() { 
       $('#cc_pagetop_status').html("<div class='alert alert-success'><strong>Success!</strong> The record was successfully deleted.</div>"); 

       if (type == "company") 
       { 
        window.location = "companies_list.php"; 
       } 
       else 
       { 
        location.reload(); 
       } 

      } 
     }); 
} else { 
    // Do nothing! 
} 

    }); 
}); 

は、DataTableのためのコードです：

$(document).ready(function() { 
    var t = $('#DataTable').DataTable({ 
     "order": [[ 1, 'asc' ]], 
     ajax: { 
      url: 'includes/dt_ss.php?getwhat=company', 
      dataSrc: '' 
     }, 
     columns: [ 
     {data: null}, 
     {"data": null, 
     "render": function (data, type, row) 
      { 
       return '<a href="companies_viewrecord.php?id='+data.id+'">'+data.name+'</a>'; 
      } 
     }, 
     //{data: 'name'}, 
     {data: 'tel'}, 
     { 
      "data": "id", 
      "render": function (data, type, full, meta) 
      { 
       return '<span class="glyphicon glyphicon-remove" ccbtn_action="delete" ccbtn_value_type="company" ccbtn_value_id="'+data+'" data-toggle="tooltip" data-placement="bottom" title="Click me to delete"></span>'; 
      } 
     } 
     ], 
    }); 

    t.on('order.dt search.dt', function() { 
     t.column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) { 
      cell.innerHTML = i+1; 
     }); 
    }).draw(); 
}); 

Answer 1

はこのようにあなたのイベントを委任してみてください。

$('#DataTable').on('click', '[ccbtn_action="delete"]', function() { ... 

私の推測では、あなたのajaxリクエストがDataTableの行をロードする前にクリックイベントがアタッチされていると思います。 jQuery event delegation with on()について詳しくはこちらをご覧ください。具体的には：

イベントハンドラは現在選択されている要素にのみバインドされています。コードが.on（）を呼び出した時点で存在していなければなりません。

Answer 2

jsは大丈夫と思われるため、おそらくタイミングの問題です。イベントをバインドするスクリプトの一部は、実際の要素が作成される前に実行されます。

それを修正するには、次のことができます。

1. は、スクリプトが要素の作成後

2. 使用動的結合（のような.delegate（）http://api.jquery.com/delegate/）

Answer 3

を結合実行していることを確認しますこのように試してみてください.jqueryのバージョンは1.9+

$(document).on('click', '[ccbtn_action="delete"]', function() { // your remaining code 

である必要があります