PHP单击链接而不是行切换答案

【问题标题】：PHP Click link instead of Row TogglePHP单击链接而不是行切换
【发布时间】：2018-08-03 03:42:07
【问题描述】：

我正在使用 tablesorter 创建一个表。该表在行点击时隐藏了一个谷歌图表。表中的某些内容具有指向单独页面的链接。当我单击链接时，它充当行单击并显示图表，而不是在链接中导航。我参考了一篇关于此主题的堆栈文章，但它可能对我无法正常工作。

Stop table row toggle upon clicking link

给出和接受的答案是：

$('a').click(function(e){
    e.stopPropagation();
});

我尝试插入我的脚本：

$('a').click(function(drawGoogleChart){
    drawGoogleChart.stopPropagation();
});

但它仍然不适合我

PHP 用于以 SQL 查询为数据点动态创建表

echo "<table id='test_table' class='table table-hover tablesorter'>";
    echo "<thead>";
        echo "<tr>";
            echo "<th>TestColA</th><th>TestColC</th><th>TestColC</th>";
        echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
        while($row = mysqli_fetch_array($db_query){
            $valA = $row[0]; #first element is an id for toggle
            echo "<tr onclick='drawGoogleChart(\"$valA\")';>";
                echo "<td>$row[0]</td>";
                echo "<td><a href="www.google.com" target='_blank'>$row[1]</a></td>";
                echo "<td>$row[2]</td>";
           echo "</tr>";

           // Child Row
           echo "<tr class='tablesorter-childRow'>";
           echo "<td><div id=\"$chart_holder\"></div></td>";
           echo "</tr>";
        }
    echo "</tbody>";
echo "</table>";

CSS 用于行切换

.tablesorter-childRow {
    display: none;
}
.tablesorter-childRow.show {
    display: table-row !important;
}

JS 用于行切换

$(function() {

    var $table = $('.tablesorter');

    $table.tablesorter({
        widgets: ['stickyHeaders', 'filter'],
        widgetOptions: {
            stickyHeaders_offset : 50,
            filter_placeholder : {search : ''},
            filter_saveFilters: true,
            pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
            pager_removeRows: false,
            filter_childRows  : true,
            filter_cssFilter  : 'tablesorter-filter',
            filter_startsWith : false,
            filter_ignoreCase : true
        }
        });
    // Clear buttons
    add_clear_buttons();

    // make toggles clickable
    $table.on('click', '.tablesorter-hasChildRow', function() {
        $(this)
            .closest('tr')
            .nextUntil('tr:not(.tablesorter-childRow)')
            .toggleClass('show');
        return false;
    });

});

JS 小提琴：http://jsfiddle.net/sdsobvp9/43/

【问题讨论】：

您能否提供一个有效的JSFiddle 来显示您的问题？
@JiFus JS Fiddle 已添加到底部
一个简单的hacky解决方案是在你的处理代码中使用$(e.target).click();，但我会看看我是否能想出一个更干净的解决方案。

标签： javascript php jquery html

【解决方案1】：

在这种情况下，您需要在单击链接时停止事件的传播。

一种方法是添加以下代码：

// Stop propagation click event to the table if an anchor is clicked
$('.tablesorter').on('click', 'a', function(e) {
    e.stopPropagation()
})

将它添加到您的 JSFiddle 中，它会变成这样：JSFiddle

【讨论】：

太棒了，谢谢。我试过的没有（'.tablesorter'）。这导致我的无法工作。感谢您丢失的部分
$('.tablesorter').on('click', 'a', function(e) {} 和$('a').on('click', function(e) {} 的区别在于，最后一个不会将任何点击侦听器绑定到第一次绑定点击侦听器后添加的锚点。如果您使用第一个版本，它会在表格上添加点击侦听器，然后依次查找锚点。这样您就可以在表格中动态生成锚点。