hawkmaster1: jquery tr click funktioniert nicht

Hallo zusammen, ich bin gerade etwas ratlos. Nachdem ich nun schon ewig suche brauche ich doch mal eure Debbugging Tipps :-)

Es gibt eine Tabelle mit mehreren Rows. in jeder Reihe gibt es eine Spalte die einen Radio Button hat. (der wird später ausgeblendet) Ich möchte nun erreichen, dass wenn man auf die Reihe <tr> klickt, der Radio automatisch selektiert wird. An sich nichts besonderes sollte man meinen. Ich habe das auch schon wo anders so gemacht.

<table id="JtkTable">
<tbody>
<tr>
<td class="Jtktd1">
<td class="Jtktd2" title="test">
<div class="Jtk_Head">test Name</div>
<input type="radio" value="2" name="rad_test">
</td>
</tr>
...

Hier die Angabe mit jquery. Es ist jedoch so das nicht mal der allererste Alert erscheint. Es scheint so das die Tabelle mit der ID nicht gefunden wird? Ich habe schon den FF Cache geleert. Im Firebug sieht man jedoch die Tabelle und ID einwandfrei.

$('#JtkTable tbody').on( 'click', 'tr', function () {
	alert('table click');
..

Auch dieses geht nicht:

$('#JtkTable tr').click(function() {
	alert('jetzt klick un tr');
	
    $(this).find('th input:radio').prop('checked', true);
})

$("#JtkTable").on("click", "tr", function() {
     alert($( this ).text());
});

Was könnte man noch kontrollieren?

vielen Dank Gruss hawk

  1. Tach,

    <table id="JtkTable">
    <tbody>
    <tr>
    <td class="Jtktd1">
    <td class="Jtktd2" title="test">
    <div class="Jtk_Head">test Name</div>
    <input type="radio" value="2" name="rad_test">
    </td>
    </tr>
    ...
    
    $('#JtkTable tbody').on( 'click', 'tr', function () {
    	alert('table click');
    ..
    

    es liegt nicht am gezeigten Code, der funktioniert nämlich: https://jsfiddle.net/61uqy1on/

    Auch dieses geht nicht:

    $('#JtkTable tr').click(function() {
    	alert('jetzt klick un tr');
    	
        $(this).find('th input:radio').prop('checked', true);
    })
    
    $("#JtkTable").on("click", "tr", function() {
         alert($( this ).text());
    });
    

    Dito, wenn man th durch td ersetzt: https://jsfiddle.net/61uqy1on/1/

    mfg
    Woodfighter

  2. Hi,

    Hier die Angabe mit jquery. Es ist jedoch so das nicht mal der allererste Alert erscheint.

    Läuft Dein Script, bevor die Tabelle existiert?

    cu,
    Andreas a/k/a MudGuard

  3. Hallo zusammen,

    im Moment habe ich es selber gefunden :-)

    Ich habe eine externe JS Datei für meine jquery Funktionen. Hier hatte ich aus Versehen den neuen Event Handler ausserhalb von Document.ready platziert

    }); //$(document).ready(function(){  //das hier war falsch bzw. kam zu früh
    
    $('#JtkTable tbody').on( 'click', 'tr', function () {
    	alert('table click');
    ..
    

    Jetzt klappt alles wie gewünscht Danke an Alle

    Gruss hawk

    1. Hi,

      Ich habe eine externe JS Datei für meine jquery Funktionen. Hier hatte ich aus Versehen den neuen Event Handler ausserhalb von Document.ready platziert

      also wie vermutet: das Script wurde ausgeführt, bevor die Tabelle existierte.

      cu,
      Andreas a/k/a MudGuard

  4. @@hawkmaster1

    <td class="Jtktd2" title="test">
    <div class="Jtk_Head">test Name</div>
    <input type="radio" value="2" name="rad_test">
    </td>
    

    Was könnte man noch kontrollieren?

    Die Beschriftung der Radiobuttons. Die fehlt nämlich. Nutzern assistiver Technologien (Screenreader) dürfte es schwerfallen, die Funktion des Radiobuttons herauszufinden.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)