title: Datatables with selectable rows and a dropdown
body: <p>1) in my current project i use a datatable with selectable rows (click to highlight/select a row). </p>
  
  <p>2) each row contains a bootstrap dropdown inside the last column.</p>
  
  <p>The Problem:</p>
  
  <p>When i click the row, the row gets selected, thats fine. But wenn i click the dropdown, the row gets selected, too. i dont want that. how can i achieve this?! Is there any way to prevent the row from being selected when i click the dropdown in the last column?</p>
  
  <p>My dropdown code:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;Aktion &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;OptionA&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;OptionB&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;OptionC&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My datatable code:</p>
  
  <pre><code>$('#invoiceList').dataTable({
      "displayLength": -1,
      "paginate": true,
      "order": [[3, "desc"]],
      "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "Alle"]],
      "ajax": "get_invoices.php",
      "deferRender": true
  });
  
  $('#invoiceList tbody').on('click', 'tr', function () {
      $(this).toggleClass('active');
  })
      });
  </code></pre>