Event click is lost on the next page in the pagination

Asked

Viewed 257 times

4

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

Follow my code below.

<!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: 1px solid #aaa;
    text-align: center;
}

thead td {    
    margin: 0;
    padding: 0;
    padding: 2px;
}

thead th {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #aaa;
}

#myTable td {
        cursor:pointer;
        background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
        text-align:center;
    }

#myTable  td:hover{
        background: -moz-linear-gradient(top, #249ee4, #057cc0);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
    }

#myTable td: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>
var dados = [
        ['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']
    ];

var tamanhoPagina = 3;
var pagina = 0;

function paginar() {
    $('table > tbody > tr').remove();
    var tbody = $('table > tbody');
    for (var i = 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));
}

function ajustarBotoes() {
    $('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina >= Math.ceil(dados.length / tamanhoPagina) - 1);
    $('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
}

function obtemPosicaoCelula() 
{
        $("#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>
javascript jquery html paging click
  • 1

    Forehead to change $("#myTable tbody td").click(function() { for $("#myTable tbody").on('click', 'td', function() { - thus, using delegation the click is not lost.

  • Thank you. It worked.

2 answers

5

The problem here seems to me of delegation of events.

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 headset:

$("#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 event click to tbody is that jQuery will see if the td there it is, and don’t register an event headphone every td that existed at the beginning of the run page.

  • It worked, but I just didn’t understand very well this delegation thing. Why should TD be put? If the event is generated is from button, for example, should the button be placed instead of TD? If it is from an image(figure)?

  • 2

    @Leandro had an error in the link in the reply, sorry. I fixed it now. Take a look on the link, deep down the .on( is waiting for the event to go up in the DOM and when it occurs will check if it has passed through an element td. Same as the button that actually started the event (ie the event.target) is other than the td.

0

  • I did the same test here and tmb is ok! rs http://jsfiddle.net/buh159/poL41cvz/

  • So problem solved right?

  • Not solved. If you are on page 2, for example, the click stops working.

  • If on your jsfiddle link it was possible to reproduce the problem would be easier to help you.

Browser other questions tagged javascript jquery html paging click

You are not signed in. Login or sign up in order to post.