jquery - 添加行点击功能后表格行中的按钮不起作用

Question

我正在使用 bootstrap 4 并获得了一个表格，其中表格行是可点击的。每行还有两个按钮。但是按钮不再起作用，因为它正在执行行单击所做的任何事情。

这是一个示例表

    <table id="subjects" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th class="d-none">IDs</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr data-href="subjects/blah">
                <td nowrap class="d-none">
                    <div>121212</div>
                </td>
                <td>
                    <button type="button" class="btn btn-dark" onclick="location.href='subject/fff'">Edit</button>
                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#confirm-delete" data-href="subject/delete/blah">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {


            $('.table tr[data-href]').each(function(){
                $(this).css('cursor','pointer').hover(
                    function(){ 
                        $(this).addClass('active'); 
                    },  
                    function(){ 
                        $(this).removeClass('active'); 
                    }).click( function(){ 
                        document.location = $(this).attr('data-href'); 
                    }
                );
            });
        });
    </script>

第一个按钮有一个 onclick，第二个按钮打开一个引导模式对话框。

目前这些按钮都不起作用，直到我删除表格行 jquery 单击功能。我怎样才能让它工作得很好？

标签： jqueryasp.net-mvcbootstrap-4

Answer 1

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