JQuery .on (‘clique’) não está funcionando em DataTables 2ª página ou linhas passado 11

Eu tenho um link jQuery que é executado em uma lista dinâmica para cada linha quando o hiperlink é clicado.

Isso funciona antes que os dados sejam aplicados, mas, uma vez que os dados são aplicados na 11ª linha (depois de mudar a exibição para mais alto que o padrão 10) ou quando em outra página, o jQuery não é mais chamado.

Eu tentei jogar isso em um jsFiddle e ele funciona, então eu não posso reproduzi-lo em um jsFiddle por algum motivo.

Quaisquer sugestões na direção certa seriam muito apreciadas.

PHP:

echo ""; echo ""; foreach($array as $arr){ echo ""; } echo "
Test1Test2
" . $arr['test1'] . "
"; echo "" . $arr['test2'] . ""; echo "
";

jQuery

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

Você precisa vincular o manipulador a um elemento estático, e não as linhas que podem ser adicionadas dinamicamente. Então deve ser:

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

Outra solução fácil que acabei de encontrar é simplesmente adicionar uma function que usa um manipulador de componentes para atualizar o DOM em qualquer retransmissão de DataTables.

Pode ser usado como:

 $(document).ready(function(){ var table = #('#table-1').DataTable({ "fnDrawCallback": function( oSettings ) { componentHandler.upgradeDOM(); } }); }); 

Ele resolveu meus problemas de paginação quando eu estava usando um menu suspenso em uma das colunas.

Há algumas coisas que podem dar errado aqui:

  • A binding do seu evento está em elementos que são substituídos, você deve usar algo como:
    $('#paginatedTable').on('click', '.toggleTest', function(e){
  • Você não parece estar escapando do seu html, de modo que os dados poderiam quebrá-lo:
    htmlspecialchars($arr['test2'])
    (em vez de apenas $arr['test2'] , pode aplicar-se a outras variables ​​também)

Segui a resposta da @Barmar.

junto com isso, envolvi o clique no documento na function do documento. Então, funcionou para mim.

 $(document).ready(function() { $('#dmtable tbody').on( 'click', 'tr td.details-control', function () { } } );