单击标题时重复

Question

美好的一天， 我正在显示一个表格，其中的内容是从PHP / MySQL中提取的。 当鼠标悬停在桌子的头部时，会出现一个小的向下箭头，当鼠标离开时会消失。我希望能够通过单击标题对列进行排序。 出于某种原因，当我在某些列上单击一次（并不总是相同的！）时，我在控制台中有2次结果（参见屏幕截图）。 这是我的代码：

<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部分：

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

控制台的屏幕截图：

我认为使用e.preventDefault();可以解决问题，但事实并非如此。 有人可以帮忙吗？提前致谢！

Answer 1

我在e.stopPropagation();之后使用了e.stopImmediatePropagation();和e.preventDefault();，看起来效果正常。谢谢您的帮助！ ：）