Wiederholung beim Klicken auf die Kopfzeile

Question

Guten Tag, Ich zeige eine Tabelle, wo der Inhalt aus PHP/MySQL extrahiert wird. Wenn die Maus den Kopf des Tisches bewegt, erscheint ein kleiner Pfeil nach unten und verschwindet, wenn die Maus geht. Ich möchte in der Lage sein, die Spalte zu sortieren, indem ich auf die Überschrift klicke. Aus irgendeinem Grund, wenn ich einmal auf einige Spalten klicke (nicht immer die gleichen!) Habe ich 2 mal ein Ergebnis in der Konsole (siehe Screenshot). Hier ist mein Code:

<table id="db" style="white-space:nowrap;display:block;margin:5px;"> 
    <tr> 
     <th id="sortByName" style="border:1px solid black;text-align:center;">Name</th> 
     <th id="sortByFname" style="border:1px solid black;text-align:center;">Firstname</th> 
     <th id="sortByTel" style="border:1px solid black;text-align:center;">Tel</th> 
     <th id="sortByZip" style="border:1px solid black;text-align:center;">ZIP Code</th> 
     <th id="sortByDate" style="border:1px solid black;text-align:center;">Birth Date</th> 
    </tr> 
    <tbody> 
     ... 
    </tbody>  
</table> 

Javascript Teil:

$("#db th").hover(function() { 
     $(this).append("<i class='fa fa-caret-down' aria-hidden='true'></i>"); 
     $(this).click(function (e){ 
      e.preventDefault(); 

      var capture = $(this).attr('id'); 
      console.log("Captured: " + capture); 

    }, function() { 
     $(this).children("i").remove(); 
    }); 
} 

Und die Bildschirmaufzeichnung der Konsole:

ich e.preventDefault(); dachte verwenden würde das Problem beheben, aber es ist nicht. Jeder kann helfen? Danke im Voraus!

Answer 1

Ich benutzte e.stopPropagation(); und e.stopImmediatePropagation(); nach e.preventDefault(); und es scheint richtig zu funktionieren. Danke für Ihre Hilfe! :)