I have some table rows which I want to be clickable.

I found out how to do that but now I have a problem with buttons within the row.

The problem is that when I click on the button it opens the link of the parent row.

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 of one row:

<tr class="row-link" data-href="www.google">
    <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>

It's all with Bootstrap and jQuery. Can someone help me?

I have some table rows which I want to be clickable.

I found out how to do that but now I have a problem with buttons within the row.

The problem is that when I click on the button it opens the link of the parent row.

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 of one row:

<tr class="row-link" data-href="www.google.">
    <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>

It's all with Bootstrap and jQuery. Can someone help me?

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3

• "but now I have a problem"... Whats your problem than? – Luca Commented Aug 10, 2015 at 13:53
• 1 Can you provide a fiddle? I copied your html and script, there is no redirection on button click. Chrome 44. – ebilgin Commented Aug 10, 2015 at 15:00

3 Answers 3

One way is to force the dropdown to toggle and stop propagation.

JS:

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

Bootply

I'm pretty sure that the problem is that when you click on the button it's still interpreted as a click on the row (its parent object).

To solve this, you need to stop propagation on the button click event. See this link: http://www.w3schools./jquery/event_stoppropagation.asp

I added the row-click class to the cells(td's) and excluded the last cell where the buttons are. Now everything works fine. No need for stopPropagation(). I removed row-link class from row and added it to the necessary cells and I've rebuild the JS to:

$('.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'); 
        }
    );
});