Question

我有一些我希望可以点击的表格行。

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

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

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。有人能帮助我吗？

Answer 1

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

<强> JS ：

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

<强> Bootply

Answer 2

我很确定问题是当你点击按钮时它仍然被解释为点击该行（它的父对象）。

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

Answer 3

我将行点击类添加到单元格（td＆＃39; s）并排除了按钮所在的最后一个单元格。现在一切正常。不需要stopPropagation（）。我从行中删除了row-link类并将其添加到必要的单元格中，并且我将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'); 
        }
    );
});

Bootstrap表行可单击，行中有按钮

3 个答案: