Кнопки в строке таблицы не работают после добавления функции щелчка строки - PullRequest
Новая
       10

Кнопки в строке таблицы не работают после добавления функции щелчка строки

0 голосов
/ 29 мая 2020

Я использую 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, вторая кнопка открывается модальный диалог bootstrap.

В настоящее время ни одна из этих кнопок не работает, пока я не удалю строку таблицы jquery функцию щелчка. Как сделать так, чтобы это работало нормально?

1 Ответ

0 голосов
/ 09 июня 2020 
$('.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'); 
      }
  );
});
...