L'événement Click ne s'enregistre pas sur la deuxième page

Question

J'utilise tablesorter et tablesorter.pager. Voici mon code. Tout fonctionne très bien, sauf quand je clique sur la page suivante mon événement de clic de bouton ne se déclenche pas. Est-ce un problème connu avec jquery tablesorter?

Answer 1

Il est parce que les éléments sont mis à jour, ceux que vous attacha le gestionnaire de clic pour sont partis, vous pouvez utiliser .live() pour résoudre ce problème, changer ceci:

$("#peopletable tr.data").click(function() { 

à ceci:

$("#peopletable tr.data").live('click', function() { 

Sinon, si #peopletable n'est pas détruit, vous pouvez utiliser .delegate(), comme ceci:

$("#peopletable").delegate('tr.data', 'click', function() { 

Answer 2

La création d'un nouvel élément ne dupliquera pas l'événement créé avec la méthode click dans laquelle la méthode live le fait.

Answer 3

J'ai également fait face au même genre de problème avec tablesortiePager deuxième page après l'utilisation Jeditable (edit in place) plugin pour certains éléments dans la table tablesortedPager utilisé.

J'ai essayé de modifier la fonction de liaison de données dans Jeditable comme suit

code original

$(this).bind(settings.event, function(e) { 

ici settings.event égal au paramètre de l'événement que nous définissons avec des options, par exemple: cliquez

modifié code

$(this).live(settings.event, function(e) { 

Mais .. J'ai trouvé l'erreur avec tablesortedPager dans les pages autres que la première page n'est pas à cause de la liaison de l'événement d'élément. lorsque nous appelons tablesortedPager à toute table avec plusieurs lignes, seules les lignes de première page de la table est affectée sur le chargement de la page. donc seules les lignes de la première page sont appelées avec Jeditable plugin. les autres lignes des autres pages ne sont pas affectées au plugin. Pour cette raison, les événements d'autres pages que la première page ne fonctionneront pas.

pour éviter la situation ci-dessus, nous pouvons ajouter plug-in Jeditable appeler à l'intérieur fonction updatePageDisplay.

par exemple:

function updatePageDisplay(c) { 

    $(".tablerowdata").each(function(){ 

      $(this).editable("ajax/save.php", { 
       tooltip : "click to edit...", 
       data : {"selectid1":"selectval1","selectid2":"selectval2","selectid3":"selectval3"}, 
       type : "select", 
       submit : "ok", 
       event  : "click", 
       select : "true", 
      }); 
      });