Wie jQuery hinzufügen. Klicken Sie auf Tablesorter th?

Ich habe table.tablesorter Element, das häufig mit AJAX ändern. Ich möchte Event-Handler auf "Klick" hinzufügen, die an table.tablesorter th.class Element delegieren wird, wenn ich auf die Kopfzeile klicke. Ich bin neu im Einsatz jQuery auf. Daher versuche ich, das folgende jQuery-Skript in die Chrome Web Console einzufügen.Wie jQuery hinzufügen. Klicken Sie auf Tablesorter th?

jQuery Skript:

$('#table-content').on(
    'click', 
    '.tablesorter thead tr th', 
    function() {alert(); } 
);

Mein HTML:

<div id="table-content"> 
    <table class="tablesorter"> 
     <thead> 
      <tr> 
       <th class="header">No.</th> 
       <th class="header">Name</th> 
       <th class="header">Phone</th> 
      </tr> 
     </thead> 
    </table> 
</div>

Ergebnis: Es gibt keinen Alarm Pop-up-Fenster, wenn ich Header auf dem Tisch klicken.

Was muss ich ändern, um den Warndialog zu öffnen, wenn ich auf den Header der Tabelle klicke?

Quelle

2013-10-29 Ifan Iqbal

Verwenden Sie ein Plugin? Wenn das der Fall ist, müssen Sie auf den generierten HTML-Code und nicht auf das ursprüngliche Markup anwenden ... –

Ich möchte das tablet des tabletters nicht berühren. Warum funktioniert jQuery nicht im generierten HTML ('table.tablesorter')? –

Ich habe gerade ein Jsfiddle http://jsfiddle.net/aakXC/ gemacht, um Ihren Code zu testen und ein Alertdialog erscheint in meinem Beispiel beim Testen. Was unterscheidet dich von deinem Code? –

Wenn Sie AJAX verwenden, die Tabelle zu laden, würde ich eine von zwei Dinge empfehlen:

Nur Aktualisieren Sie die Zeilen innerhalb des tbody, es sei denn, die Header-Zellen werden vollständig ersetzt, dann n nicht um sich Gedanken über den Umgang mit den Header-Klicks zu machen.

Wenn Sie die Tabellen als vollständige Tabellen gespeichert haben, folgen Sie entweder der anderen Option (Empfehlung # 2), oder laden Sie die Tabelle in einen temporären Halter, übertragen Sie dann den tbody und aktualisieren Sie die Tabelle.
```
var $table = $('#table-content').find('table'); 
$('#hidden-div').load("ajax.html", function() { 
    // remove old tbody 
    $table.find('tbody').remove(); 
    // move new tbody into the initialized tablesorter table 
    $('#hidden-div').find('table tbody').appendTo($table); 
    // update tablesorter's cache 
    $table.trigger('update'); 
}); 
```

Wenn die gesamte Tabelle ersetzt wird, initialisieren Sie einfach sitesorter. Ihre Ajax würde wie folgt aussehen:

var options = { /* add tablesorter options here */ }; 

$.ajax({ 
    url: url, 
    data: data, 
    success: function(data){ 
    $('#table-content').find('table').tablesorter(options); 
    }, 
    dataType: dataType 
});

Quelle

2013-10-30 03:39:13 Mottie

Die Idee, das Ajax-Verhalten zu ändern, löst dieses Problem. –

Sie können diesen Code versuchen

$("table.tablesorter tr th.header").click(function() { 
    alert("Handler for .click() called."); 
    });

Quelle

2013-10-29 08:21:51

Ich würde dies nicht empfehlen, wenn Sie Ajax verwenden. Das Element ist möglicherweise nicht vorhanden, wenn das Ereignis gebunden ist. OP hat es korrekt mit '.on' –

<!DOCTYPE html> 
<html> 
<head> 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function() { 
$("table.tablesorter tr th.header").click(function() { 
    alert("Handler for .click() called."); 
    }); 
    }); 
</script> 
</head> 

<body> 
<div id="table-content"> 
    <table class="tablesorter"> 
    <thead> 
     <tr> 
      <th class="header">No.</th> 
      <th class="header">Name</th> 
      <th class="header">Phone</th> 
     </tr> 
    </thead> 
</table> 
</div>

Quelle

2013-10-29 08:26:18

jQuery .click funktioniert nicht mit Element, das generiert, nachdem DOM abgeschlossen ist, oder für Elemente, die von Javascript erstellt wurden, wenn wir einfach .click Funktion einmal nach Dokument bereit. –

Wie jQuery hinzufügen. Klicken Sie auf Tablesorter th?

Antwort

Verwandte Themen