1

У меня проблема, динамически обновляемая таблица не работает. Когда я вручную обновляю страницу, она работает правильно, я могу удалить запись. Как только я добавлю пользователя в таблицу, таблица динамически обновляется через базу данных, но потом я не могу удалить записи. Такое чувство что на этой странице нет таблицы.

 // AJAX - dynamically update the table.    
      function dynamicTable() {
        $.ajax({
          type: 'GET',
          url:  'table.php',
          dataType: "html", 
          success: function( html ){
            console.log(html);
            $("#trash").html(html);
          }
        }); 
      }
//AJAX - delete record
  $('#trash td').on('click', function(e) {
    console.log(111)
      // e.preventDefault();

    // if you do NOT click on the picture -> exit
    if (e.target.nodeName != 'IMG') {
        return false;
    } else {
        let id = $(this).data('label');
        $(this).parent('tr').remove();
        // get the text from the `ID U` for deletion by id
        var parentDel = this.parentElement.children[1].textContent;
    }                             
        $.ajax({
        type: 'POST',
        url:  'regist.php',
        data: {
           id_delete: parentDel,
        },
        success: function( response ){
          dynamicTable();
          console.log(response);
        }
    });
  });

$query = 
    'SELECT phones_users.id,
         phones_users.id_user,
         users.user_first_name,
         users.user_last_name,
         phones_users.phone_1,
         phones_users.phone_2
     FROM users
     INNER JOIN
         phones_users
     ON   
         users.id = phones_users.id_user';

$result = mysqli_query($con, $query);
$count_users = mysqli_num_rows($result);

if ($count_users) {
    while ($row = mysqli_fetch_array($result)) {


        echo "<tr><td data-label='ID R'>$row[0]</td><td data-label='ID U'>$row[1]</td><td data-label='Name'>$row[2]</td><td data-label='Last Name'>$row[3]</td><td data-label='Phone 1'>$row[4]</td>
            <td data-label='Phone 2'>$row[5]</td>
            <span><td style='padding: 5px;'>
                <a href='#'>
                    <img src='img/trash.png' width='25px' height='25px'>
                </a>
            </td></span>
            </tr>
        ";
    }




// var_dump($query);
}
?>

1 ответ 1

1
$('#trash').on('click', 'td', function(e) {
  ...

Объяснение

$('#trash td').on('click', function(e) {

навешивает обработчик события click только на элементы выборки '#trash td', существующие в момент выполнения этой строки кода. Элементы td внутри #trash, которые появятся позднее, не будут затронуты этим обработчиком.

$('#trash').on('click', 'td', function(e) {

прикрепляет оброботчик к элементу '#trash', а вызываться этот обработчик будет, если событие произошло на элементе td. Таким образом, все, что нужно в момент выполнения этого кода, - существование элемента '#trash'. Обработчик будет вызываться для элементов 'td' как существующих, так и созданных в дальнейшем.

1
  • Спасибо, помогло, а можете объяснить в чем прокол? В чем разница? 10 апр 2018 в 21:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.