JQuery .on（'click'）不能在DataTables第2页或11行以上的行中使用 [英] JQuery .on('click') not working in DataTables 2nd page or rows past 11

问题描述

在应用数据表之前，这种方法可行，但是一旦应用了数据表，就可以运行在每个行的动态列表上。第11行（在将显示更改为高于默认值10之后）或者在另一页上时，不再调用jQuery。

我试着将它扔到jsFiddle中它在那里工作，所以我不能在jsFiddle中由于某种原因再现它。

任何指向正确方向的指针都会非常感谢。

PHP：

  echo< table id ='paginatedTable'>; 
 echo< the> Test1< th> Test2< / thead>< tbody>; 
 foreach（$ array as $ arr）{
 echo< tr>< td> 。 $ arr ['test1']。 < / td>< td>< div class ='test'>; 
 echo< a href ='＃'class ='toggleTest'data-id ='。 $ arr ['id']。''id ='test-。 $ arr ['id']。 >中。 $ arr ['test2']。 < / A> 中; 
 echo< / div>< / td>< / tr>; 
} 
 echo< / tbody>< / table>; 
  

jQuery

 <$ （''click'，'.toggleTest'，function（e）{
 var id = $（this））。 data（'id'）; 
 $（＃test  - + id）.html（Done）; 
 return false; 
}）; 
}）; 
 
 $（document）.ready（function（）{
 $（'＃paginatedTable'）。dataTable（）; 
}）; 
  

解决方案

您需要将处理程序绑定到静态元素，而不是可以动态添加的行。所以它应该是：

  $（＃paginatedTable）。on（click，.test .toggleTest，功能...）; 
  

I have a jQuery link that runs on a dynamic list for each row when the hyperlink is clicked.

This works before datatables is applied, but once datatables is applied the 11th row (after changing display to higher than the default 10) or when on another page, the jQuery is no longer called.

I tried throwing this in a jsFiddle and it works there, so I can't reproduce it in a jsFiddle for some reason.

Any pointers in the right direction would be very much appreciated.

PHP:

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

$(function(){
    $('.test').on('click', '.toggleTest', function(e){
        var id = $(this).data('id');
        $("#test-"+id).html("Done");
        return false;
    });
});

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );

解决方案

You need to bind the handler to a static element, not the rows that can be added dynamically. So it should be:

$("#paginatedTable").on("click", ".test .toggleTest", function ...);

这篇关于JQuery .on（'click'）不能在DataTables第2页或11行以上的行中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！