Datatables, как связать событие во всех строках таблицы

Question

Мой datatable работает отлично, за исключением того факта, что я пытаюсь добавить функциональность dblclick для каждой строки, которая работает частично.

Итак, это мой код:

oTable = $('#example').dataTable({ 
    "aaSorting": [[ 1, "desc" ]], 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers" 
}); 

/* Add a click handler to the rows */ 

//This highlights the row selected 
$("#example tbody").click(function(event) { 
     $(oTable.fnSettings().aoData).each(function(){ 
       $(this.nTr).removeClass('row_selected'); 
     }); 
     $(event.target.parentNode).addClass('row_selected'); 
}); 

//this attaches a dblclick event on the row 
$("#example tr").dblclick(function() { 
     var iPos = oTable.fnGetPosition(this); 
     var aData = oTable.fnGetData(iPos); 
     var iId = aData[1]; 
     $('#edit'+iId).click(); //clicks a button on the first cell 
}); 

Подсветка строк хорошо для всех строк таблиц, но dblclick работает только для тех строк, где первоначально оказываемых на первой странице. Когда я сортирую/ищу данные и отображаемые данные меняются, событие dblclick не работает для тех строк, которые не отображаются на первой странице.

Может ли кто-нибудь помочь решить эту тайну? Благодаря

Answer 1

Первый ответ близок к совершенству, но должен иметь небольшую настройку, которая мешает ему работать.

Как и в Jquery apidoc on() вы должны добавить [, selector ], как я сделал ниже с "tr"

$("#example").on("dblclick", "tr", function() { 
     var iPos = oTable.fnGetPosition(this); 
     var aData = oTable.fnGetData(iPos); 
     var iId = aData[1]; 
     $('#edit'+iId).click(); //clicks a button on the first cell 
}); 

Answer 2

попробовать этот

$("#example tbody").on("click",function(event) { 
     $(oTable.fnSettings().aoData).each(function(){ 
       $(this.nTr).removeClass('row_selected'); 
     }); 
     $(event.target.parentNode).addClass('row_selected'); 
}); 


    $("#example tr").on("dblclick",function() { 
      var iPos = oTable.fnGetPosition(this); 
      var aData = oTable.fnGetData(iPos); 
      var iId = aData[1]; 
      $('#edit'+iId).click(); //clicks a button on the first cell 
    }); 

мы можем использовать события непосредственно на данных, которые будут загружать, когда страница loading.Othersise мы должны использовать дальше.

Answer 3

в случае вам нужен другой, но подобный сценарий для связывания всех конкретных классов внутри DataTable см ниже образца

$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler); 

также рассмотреть следующий официальный документ об этой проблеме:

Один из лучших способов борьбы с этим путем использования делегированных событий с JQuery по методу

https://datatables.net/examples/advanced_init/events_live.html