title: Bootstrap table row clickable with buttons in row
body: <p>I have some table rows which I want to be clickable. </p>
  
  <p>I found out how to do that but now I have a problem with buttons within the row.</p>
  
  <p>The problem is that when I click on the button it opens the link of the parent row.</p>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>$('.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'); 
          }
      );
  });
  </code></pre>
  
  <p><strong>HTML of one row:</strong></p>
  
  <pre><code>&lt;tr class="row-link" data-href="www.google.com"&gt;
      &lt;td style="text-align: right;"&gt;
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-default btn-xs"&gt;
                  &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Edit
              &lt;/button&gt;
              &lt;button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;&lt;/button&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;li&gt;
                      &lt;a href="open"&gt;
                          &lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; Open
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="close"&gt;
                          &lt;span class="glyphicon glyphicon-eye-close"&gt;&lt;/span&gt; Close
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>It's all with Bootstrap and jQuery. Can someone help me?</p>