Click event gets lost on next page in pagination

Navigation
4

I have developed a simple pagination page for my studies and am having a problem in the click event when I go to the next page. On the first page the event works but when I go to the next one the event seems to get lost. What can it be?

Below is my code. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><style>table{border-spacing:0px;border-collapse:separate;width:100%;border-bottom:1pxsolid#aaa;text-align:center;}theadtd{margin:0;padding:0;padding:2px;}theadth{margin:0;padding:5px;border-bottom:1pxsolid#aaa;}#myTabletd{cursor:pointer;background:-moz-linear-gradient(top,#ffffff,#D1E3E9);background:-webkit-gradient(linear,0%0%,0%100%,from(#ffffff),to(#D1E3E9));text-align:center;}#myTabletd:hover{background:-moz-linear-gradient(top,#249ee4,#057cc0);background:-webkit-gradient(linear,0%0%,0%100%,from(#249ee4),to(#057cc0));}#myTabletd:active{background:-moz-linear-gradient(top,#057cc0,#249ee4);background:-webkit-gradient(linear,0%0%,0%100%,from(#057cc0),to(#249ee4));}div{padding-top:10px;text-align:center;}</style><script>vardados=[['Banana','10,00'],['Maça','2,00'],['Pera','6,00'],['Goiaba','3,25'],['Tamarindo','1,50'],['Cenoura','0,75'],['Alface','0,99'],['Tomate','3,21'],['Abacaxi','N/D'],['Kiwi','99,50'],['Cebola','1,15'],['Alho','1,02'],['Abóbora','4,75'],['Pêssego','2,33'],['laranja','2,99']];vartamanhoPagina=3;varpagina=0;functionpaginar(){$('table>tbody>tr').remove();vartbody=$('table>tbody');for(vari=pagina*tamanhoPagina;i<dados.length&&i<(pagina+1)*tamanhoPagina;i++){tbody.append($('<tr>').append($('<td>').append(dados[i][0])).append($('<td>').append(dados[i][1])))}$('#numeracao').text('Página'+(pagina+1)+'de'+Math.ceil(dados.length/tamanhoPagina));}functionajustarBotoes(){$('#proximo').prop('disabled',dados.length<=tamanhoPagina||pagina>=Math.ceil(dados.length/tamanhoPagina)-1);$('#anterior').prop('disabled',dados.length<=tamanhoPagina||pagina==0);}functionobtemPosicaoCelula(){$("#myTable tbody td").click(function() {     

            var column_num = parseInt( $(this).index() ) + 1;
            var row_num = parseInt( $(this).parent().index() )+1;    

            $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ column_num );   
        });
}

$(function(){
    $('#proximo').click(function() {
        if (pagina < dados.length / tamanhoPagina - 1) {
            pagina++;
            paginar();
            ajustarBotoes();
        }
    });
    $('#anterior').click(function() {
        if (pagina > 0) {
            pagina--;
            paginar();
            ajustarBotoes();
        }
    });
    paginar();
    ajustarBotoes();
    obtemPosicaoCelula();

});
</script>
</head>
<body>

<table id="myTable">
    <thead>
        <tr>
            <th>Descrição</th>
            <th>Valor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2" align="center">Nenhum dado ainda...</td>
        </tr>
    </tbody>
</table>
<div>
<button id="anterior" disabled>&lsaquo; Anterior</button>
    <span id="numeracao"></span>
<button id="proximo" disabled>Próximo &rsaquo;</button>
</div>
<div id="result"> </div>

</body>
</html>
    
asked by anonymous 25.08.2015 / 21:27

2 answers

5

The problem here seems to me of event delegation.

When you add new HTML with 

tbody.append(
    $('<tr>')
        .append($('<td>').append(dados[i][0]))
        .append($('<td>').append(dados[i][1]))

These new td did not exist when you registered this event handset: 

$("#myTable tbody td").click(function() {

So you must change 

$("#myTable tbody td").click(function() {

for 

$("#myTable tbody").on('click', 'td', function() {

and so, using delegation the click is not lost because only when the click event reaches the tbody is that jQuery will see if td is there, and not register an event handset with every td that existed at the top of the page run.

    
25.08.2015 / 22:05
0

I took your code and put it in the jsfiddle (only part of the page) and apparently it works: link

    
25.08.2015 / 21:32
List three-dimensional table Error log in Java application