drop-switch in clickable 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(...);