在可点击的 tr 中下拉切换

Question

    <tr class='clickable-row' data-href='details.html'>
    ...
    <td>
     <div class="ibox-tools">
      <a class="dropdown-toggle doDropdown" data-toggle="dropdown">
        <i class="fa fa-wrench"></i>
      </a>
      <ul class="dropdown-menu">
       <li><a href="#">Delete</a></li>
      </ul>
     </div>
    </td>
    </tr>
    ...
    <script>
      $(".clickable-row").click(function() {
         window.location = $(this).data("href");
      });
      $('.doDropdown').click(function( event ) {
         $(this).dropdown();
         return false;
     </script>

我在一个表格中创建了可点击的 tr 元素，该元素会导致一个新页面。 在每个 TR 中，末尾都有一个 TD，带有一个下拉切换，它不应该触发 TR 事件，而只会打开下拉列表。

我试图通过使用event.stopPropagation((来阻止href事件，但这也杀死了切换事件。 所以我使用 $(this(.dropdown("toggle"( 再次触发切换事件，但我感觉这对于简单的行为来说太复杂了。

有没有简单的出路？

Answer 1

event.stopPropagation()实际上有效。

.html：

<table>
  <tr class='clickable-row' data-href='details.html'>
    <td>
      some content here
    </td>
    <td>
      <div class="ibox-tools">
        <a class="dropdown-toggle doDropdown" data-toggle="dropdown">
          <i class="fa fa-wrench">Action</i>          
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Delete</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>

脚本：

$(".clickable-row").click(function() {
         //window.location = $(this).data("href");
         alert('row click');
      });
$('.doDropdown').click(function( event ) {
    alert('dropdown click');
  $('.dropdown-menu').toggle();
  event.preventDefault();
  event.stopPropagation();
  //$(this).dropdown();
 });

您仍然需要更新为要对下拉列表执行的任何操作。就我而言，我正在切换它的可见性。

此外，由于您的下拉列表本身在表中 - 您还需要终止每个元素的传播......或dropdown-menu拉到表外。

另一个技巧是将事件订阅到td，并取消订阅下拉列表td。

$('.clickable-row td:not(:last)').click(...);