Datatables je ne peux pas appeler un événement onclick après je paginer?

Je suis en utilisant http://datatables.net/

La démo de table sur leur page d'accueil ressemble à peu près la même chose exacte que j'utilise (la pagination, plus précisément), sauf que chaque ligne comporte une zone à cliquer:

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

Ce lien ouvre une jquery UI boîte de dialogue modale qui affiche certaines informations qui est ajax demandé.

Partie 1 (résolu), voir la partie 2 ci-dessous

Je suis en train de lancer un événement onclick qui fonctionne normalement sur une seule page, mais dès que je passe à la page 2 (ou toutes les autres), il s'arrête de fonctionner. J'ai vérifié la source pour s'assurer qu'il n'était pas de faire quelque chose de drôle dans tout le code est en effet là (toutes les lignes, même ceux cachés par la pagination)

Des idées?

$(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;
    });
});

Merci à ceux qui ont répondu à ma question! J'ai résolu le problème.

Partie 2

mon prochain 'problème' id comme pour se rendre au travail est... je suis en utilisant les touches fléchées gauche et droite pour leur permettre de "scan" à la suivante ou précédente de la ligne, et d'afficher l'information. C'est par opposition à la fermeture, puis cliquez sur suivant.

J'aimerais faire en sorte que quand vous arrivez à la partie inférieure de la page, ou en haut de la page deux, se faufiler suivante/précédente, respectivement charge automatiquement la page, allez vers le haut (ou le bas), puis ouvrez cette boîte de dialogue pour la ligne sur l'autre page.

heres ma cliquez sur la fonction (je sais c'est une sorte de probablement pas structuré le meilleur... im nouveau à 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)
        }
    });
});

heres la réelle cliquez sur la fonction

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;
};
  • Il semble que votre pagination n'est pas de remettre en place le gestionnaire de clic après le dom changements. Essayez de rattacher les événements ou à l'aide d'un formulaire dynamique de la fixation de l'événement comme délégué ou de vivre (selon la version de jquery que vous utilisez).
InformationsquelleAutor Tallboy | 2011-12-28