データイベントにクリックイベントを追加する

Question

ここでは、Ajaxから値を取得して配置するためのJqueryデータテーブルを示します。

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": "data/arrays.txt" 
    }); 
}); 

ここには構成されたテーブルがあります。

私はそれにクリック機能を書いてみたいです。どうすればいいですか？

<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;"> 
    <tbody> 
     <tr role="row" class="odd"> 
      <td class="sorting_1">TMB030</td> 
      <td>Sample Collected</td> 
     </tr> 
     <tr role="row" class="even"> 
      <td class="sorting_1">TMB033</td> 
      <td>Sample Collected</td> 
     </tr> 
    </tbody> 
</table> 

私は役割=「行」にイベントをクリックして、その上に値TMB030を取得書きたいです。

どうすればいいですか？

私はこの

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": "myOrders/" + Cookies.get('userSession') 
    }); 
    $("div[role='row']").click(function() { 
     alert('clicked') 
    }); 
}); 

ようにしようとしたが、どのように私はそれを行うことができますトリガされませんか？ plsは

Answer 1

それはこのようにする必要がありますヘルプ：

$(document).on("click", "tr[role='row']", function(){ 
    alert($(this).children('td:first-child').text()) 
}); 

簡単な説明：すべての 最初にどの要素がどのあなたはクリックイベント、すなわちdiv[role='row']を適用しているDOMに存在していないがあります。第2に、クリックイベントをバインドする時間がDataTableで完全にロードされておらず、クリックイベントを適用している要素がまだ存在しないため、クリックイベントを動的にバインドする必要があります。

Answer 2

これにあなたのクリックを変更し

：

$("tr[role='row']").on("click",function(){ 
    alert($(this).find("td:first-child").text()); 
}); 

サンプル：

$(document).ready(function() { 
 

 

 
    $("tr[role='row']").on("click",function() { 
 
    alert($(this).find("td:first-child").text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;"> 
 
    <tbody> 
 
    <tr role="row" class="odd"> 
 
     <td class="sorting_1">TMB030</td> 
 
     <td>Sample Collected</td> 
 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class="sorting_1">TMB033</td> 
 
     <td>Sample Collected</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

.clickイベントは、あなたのケースでは、行がajax後にロードされ、動的要素に結合しませんコール。

ですから、AJAXによってあなたの表をロードする場合は、おそらくより良い機能のdataTableの「INITCOMPLETE」を使用するだろう

以下

$("tr[role='row']").on('click', function(){ 
    alert('clicked') 
}); 

Answer 4

にコードを変更し、その後、あなたはときに、テーブル内の任意の要素にイベントをバインドすることができあなたはすべての行があることを完全に確信しています。

$('#example').DataTable({ 
    "ajax": "myOrders/" + Cookies.get('userSession'), 
    "initComplete": function() { 
      $(document).on("click", "tr[role='row']", function(){ 
       alert($(this).children('td:first-child').text()) 
      }); 
     } 
});