Переписывание сценария jQuery для связывания строк таблицы с динамической связью после того, как AJAX-поиск таблицы был реализован

Question

У меня была HTML-таблица, которая была заполнена информацией о сервере. Код jQuery позволял нажимать на строки таблицы, и он следовал бы по динамической ссылке, основанной на соответствующем идентификаторе в этой строке.

Я добавил скрипт, который позволяет выполнять функцию поиска / фильтрации таблицы, которая обновляется без перезагрузки страницы методом AJAX. Теперь нажатие на строки таблицы не идет по ссылке.

Вот сценарии:

Пример таблицы (кнопка «ссылка» действительно работает):

$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0) {
    $output .= '<thead>
    <tr>
    <th>Order Number</th>
    <th>Client</th>
    <th>Status</th>
    <th>Samples</th>
    <th>Time Stamp</th>     
    <th colspan="1"></th>          
    </tr>                           
    </thead>';
    while ($row = mysqli_fetch_assoc($result)) {
        $output .= '<tbody> 
        <tr class="table_click" data-href="analysis_results_disp_page.php?display_results='.$row['id'].'">
        <td>'.$row['order_number'].'</td>
        <td>'.$row['client_name'].' <i>('.$row['company_name'].')</i></td>
        <td>'.$row['order_status'].'</td>
        <td>'.$row['number_of_samples'].'</td>
        <td>'.$row['date1'].' <i>('.$row['time1'].')</i></td>   
        <td>
        <a class="edittablebtn" href="analysis_results_disp_page.php?display_results='.$row['id'].'">LINK</a>
        </td>                  
        </tr>  
        </tbody>';
    }

jQuery, используемый для поиска / фильтрации таблицы:

  $(document).ready(function(){
    load_data();
    function load_data(query) {
      $.ajax({
        url:"../server/search_orders.php",
        method:"POST",
        data:{query:query},
        success:function(data) {
          $('#client_database').html(data);
        }
      });
    }

    $('#search_table').keyup(function() {
      var search = $(this).val();
      if(search != '') {
        load_data(search);
      } else {
        load_data();      
      }
    });

  });

И jQuery для щелчка строки таблицы (проблемная область):

  $(document).ready(function($) {

    $(".table_click").on('click-row.bs.table', function (e, row, $element) {
      window.location = $element.data('href');
    });

  });

Answer 1

Функция прослушивания событий '$ (". Table_click"). On ()' для открытия ajax-ссылок привязана ко всем элементам .table_click, которые доступны в $ (document) .ready ();

После того, как вы измените содержимое вашего домена, в вашем случае, когда вы обновите тело таблицы с помощью ajax, новое содержимое не будет иметь прослушивателей событий для элементов .table_click.

В вашей функции Ajax Success вы можете добавить слушателей к новому контенту:

$(".table_click:not(.processed)").addClass('processed').on(...)

Исключение элементов .processed и добавление этого класса помогут избежать связывания и многократного вызова одного и того же прослушивателя событий.