Datatables No puedo llamar a un evento onclick después de paginar?

Question

estoy usando http://datatables.net/

La mesa de demostración en su página principal se asemeja más o menos la misma cosa que estoy usando (paginación, específicamente), excepto que cada fila tiene un área para hacer clic:

<a href="#" class="show-post"><%= Post.title %></a>

Este enlace abre un diálogo modal de la interfaz de usuario de jquery que muestra cierta información que se solicita ajax.

Parte 1 (resuelto), véase la parte 2 a continuación

Estoy intentando ejecutar un evento onclick que funciona normalmente en la primera página, pero tan pronto como me voy a la página 2 (o cualquier otro) deja de funcionar. Revisé la fuente para asegurarse de que no estaba haciendo nada gracioso en todo el código es de hecho allí (todas las filas, incluso los más ocultos por la paginación)

¿Alguna idea?

$(function() { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     resizable: false, 
     maxHeight: 600, 
     width: 650, 
     modal: true, 
     beforeClose: function close() { 
      $('#dialog').html(''); 
     } 
    }); 

    $('.show-post').click(function() { 
     clickLink(this); 
     return false; 
    }); 
}); 

Gracias a todos los que respondieron mi pregunta! Solucioné ese problema.

Parte 2

mi próximo 'problema' identificación como para llegar al trabajo es ... Estoy usando las teclas de flecha izquierda y derecha para que puedan 'exploración' de la fila siguiente o anterior y muestra la información. Esto es opuesto a cerrarlo y luego tener que hacer clic en el siguiente.

Me gustaría que sea así cuando llegue a la parte inferior de la página uno, o al principio de la página dos, ocultando siguiente/anterior respectivamente cargará automáticamente esa página, vaya a la parte superior (o inferior) y luego abra ese diálogo para esa fila en la otra página.

aquí está mi función de clic (sé que es tipo de probablemente no estructurado el mejor ... im nuevo en jQuery)

$(document).ready(function() { 
    oTable = $('#posts').dataTable({ 
     "bJQueryUI": true, 
     "iDisplayLength": 400, 
     "bAutoWidth": false, 
     "sPaginationType": "full_numbers", 
     "aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]] 
    }); 

    $(this).keydown(function(e) { 
     var id = $("#dialog").attr("data-id"); 
     currentPost = $("#posts tr[data-id=" + id + "]"); 

     if (e.keyCode == 39 && $('#dialog').html() != "") { 

      /* Remove current background */ 
      $(currentPost).blur() 
      $(currentPost).removeClass("current"); 
      $(currentPost).find("td.sorting_1").removeClass("current"); 

      var next = currentPost.next().find(".show-post"); 
      clickLink(next); 

     } else if (e.keyCode == 37 && $('#dialog').html() != "") { 

      /* Remove current background */ 
      $(currentPost).removeClass("current"); 
      $(currentPost).find("td.sorting_1").removeClass("current"); 

      var prev = currentPost.prev().find(".show-post"); 
      clickLink(prev) 
     } 
    }); 
}); 

aquí tiene la función de clic real

function clickLink(src) { 
var post = $(src); 
var id = $(post).parent().parent().attr('data-id'); 

/* Set background for current line */ 
$(post).parent().parent().find("td.sorting_1").addClass("current"); 
$(post).parent().parent().addClass("current"); 

$('#dialog').attr("data-id", id); 

$('#dialog').load('/show-post/' + id, function() { 

    $.ajax({ 
     type: "POST", 
     url: "/checkstatus/" + id, 
     dataType: "html", 
     error: function(data){ 
      $("#dialog").fadeOut("fast", function() { 
      $("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow"); 
      }); 
     } 
    }); 

    /* Set Visited */ 
    $(post).parent().parent().removeClass("visited").addClass("visited"); 

    $('#dialog').dialog({ 
     title: post.html(), 
     beforeClose: function close() { 
      $(post).parent().parent().find("td.sorting_1").removeClass("current"); 
      $(post).parent().parent().removeClass("current"); 
     }, 
     buttons: { 
      "Email 1": function() { 
       $.ajax({ 
        type: "POST", 
        url: "/get-email/" + id + "/" + "1", 
        dataType: "html", 
        success: function(data) { 
         window.location.href = data + "&subject=" + post.html(); 
        } 
       }); 
      }, 

     } 
    }); 
    $('#dialog').dialog('open'); 
}); 
return false; 
}; 

Answer 1

El ejemplo de la El enlace que usted proporcionó parece estar agregando/eliminando elementos DOM, lo que significa que los elementos en páginas posteriores probablemente no están en el DOM en la carga de la página. ¿Has intentado usar la delegación de eventos?

$(<root element>).delegate('.show-post', 'click', function() { 
    clickLink(this); 
    return false; 
}); 

Dónde <root element> puede haber document sino que se establezcan a un elemento ancestro que siempre está en el DOM.

.delegate():

Adjuntar un manejador de uno o más eventos para todos los elementos que coinciden con el selector de , ahora o en el futuro, en base a un conjunto específico de raíz elementos.

Fuente: http://api.jquery.com/delegate

ACTUALIZACIÓN

Tenga en cuenta que .delegate() es un alias de .on() ahora, así que si estás usando jQuery 1.7+ yo sólo lo haría use .on() desde el primer momento. Casi la misma sintaxis, excepto el selector y el evento se intercambian: $(<root element>).on('click', '.show-post', function() { ... });

Fuente: Gracias Greg Pettit, excelente comentario

Answer 2

Como @scrappedcola señaló en los comentarios, el controlador de clic se pierde después de la paginación. Existe una función drawCallback para DataTables que puede implementar y que se activará una vez que la tabla se "vuelva a dibujar" (de ahí que drawCallback). Aquí está un ejemplo:

$('#someId').DataTable({ 
    lengthMenu: [ 25, 50, 100, 200 ], 
    order: [[ 0, 'asc' ]], 
    processing: true, 
    serverSide: true, 
    stateSave: true, 
    responsive: true, 
    bDestroy: true, 
    columns: [ 
     { data: 'id', name: 'id' }, 
     { data: 'name', name: 'name' }, 
    ], 
    drawCallback: function() { 
     var api = this.api(); 
     api.$('#someBtnId').click(function() { 
      // do some click handler stuff 
     }); 
    } 
}); 

Answer 3

A continuación Código está funcionando perfectamente. Cuando hace clic en el botón de paginación 'drawCallback' class Llame a alguna función después de cargar la tabla.

 
$("#YourTableID").dataTable({ 
        bJQueryUI: false, 
        bFilter: false, 
        bSearchable: false, 
        bInfo: false, 
        bAutoWidth: false, 
        bDestroy: true, 
        "oLanguage": { 
         "sEmptyTable": "No Records Found" 
        }, 
        "sPaginationType": "full_numbers", 
        "bLengthChange": false, 
        "iDisplayLength": 5, 
        aaData: arrv, 
        aoColumns: [{ 
         sTitle: "Select", 
         orderable: false, 
         className: 'select-checkbox', 
         targets: 0 
        }, 
        { 
         sTitle: "Course name" 
        }, { 
         sTitle: "Level" 
        }, { 
         sTitle: "Study Mode" 
        }, { 
         sTitle: "Entry Year" 
        }, { 
         sTitle: "Point of Entry" 
        }, { 
         sTitle: "Awarding qualification" 
        }], 
        drawCallback: function() { 
         //Some function... 
        }, 
        select: { 
         style: 'os', 
         background: 'color:gray', 
         selector: 'td:first-child' 
        }, 
        order: [[1, 'asc']], 

       });