Bootstrap 表行可点击，行中的按钮答案

【问题标题】：Bootstrap table row clickable with buttons in rowBootstrap 表行可点击，行中的按钮
【发布时间】：2015-08-10 13:49:28
【问题描述】：

我有一些表格行，我希望它们可以点击。

我发现了如何做到这一点，但现在我遇到了行内按钮的问题。

问题是当我点击按钮时，它会打开父行的链接。

JS：

$('.table tr.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).addClass('active'); 
        },  
        function(){ 
            $(this).removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).attr('data-href'); 
        }
    );
});

一行的HTML：

<tr class="row-link" data-href="www.google.com">
    <td style="text-align: right;">
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="open">
                        <span class="glyphicon glyphicon-eye-open"></span> Open
                    </a>
                </li>
                <li>
                    <a href="close">
                        <span class="glyphicon glyphicon-eye-close"></span> Close
                    </a>
                </li>
            </ul>
        </div>
    </td>
</tr>

这一切都使用 Bootstrap 和 jQuery。有人可以帮我吗？

【问题讨论】：

“但现在我有一个问题”...你的问题是什么？
你能提供一个小提琴吗？我复制了您的 html 和脚本，单击按钮时没有重定向。铬 44。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

一种方法是强制下拉菜单切换并停止传播。

JS：

$('.btn-group').on('click', function(e){
     $(this).find('.dropdown-toggle').dropdown('toggle');
     e.stopPropagation();
});

Bootply

【讨论】：

【解决方案2】：

我很确定问题在于，当您单击按钮时，它仍被解释为对行（其父对象）的单击。

要解决这个问题，您需要停止按钮单击事件的传播。见此链接：http://www.w3schools.com/jquery/event_stoppropagation.asp

【讨论】：

当我这样做时，下拉菜单不再起作用，但按钮起作用。您对此有解决方案吗？
你是加到按钮上还是加到tr上？
我将它添加到按钮中。当您仔细查看 HTML 时，有一个 Edit 按钮，旁边有一个向下的箭头，这是一个带有更多选项的下拉菜单。
好的，我看到了 2 个按钮 - 一个用于切换下拉菜单，一个用于触发编辑功能。这东西应该如何工作？你能更清楚地画一幅画或更清楚地解释你的目标吗？

【解决方案3】：

我将行单击类添加到单元格（td's）并排除了按钮所在的最后一个单元格。现在一切正常。不需要 stopPropagation()。我从行中删除了行链接类并将其添加到必要的单元格中，并且我已将 JS 重建为：

$('.table td.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).parent().addClass('active'); 
        },  
        function(){ 
            $(this).parent().removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).parent().attr('data-href'); 
        }
    );
});

【讨论】：