Как удалять элементы, подгруженные динамически?

Question

[Максим]

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

<tbody id="table_ajax">
<?php foreach ($post as $vars): ?>
<tr>
   <input type="hidden" name="form_id" class="id_inp" value="<?=htmlspecialchars($vars['id'], ENT_QUOTES)?>">
   <td><?=htmlspecialchars($vars['item_name'], ENT_QUOTES)?></th>
   <td><?=htmlspecialchars($vars['item_qty'], ENT_QUOTES)?></td>
   <td><button type="button" name="delete_item" id="item_delete" class="close deleter">delete</button></td>
</tr>

$(document).on('click', 'button[class="close deleter"]', function() {
  event.preventDefault();
  let $row = $(this).closest('tr');
  let data = $row.find('input').serialize();
  $.ajax({
    type: "POST",
    url: "delete_me.php",
    data: data,
    success: function(html){
      $("#table_ajax").load('table.php');
      $('#order')[0].reset();
    }
  });
  return false;
});

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

Comments

[Vadym Masiuk]

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

[Максим]

Vadym Masiuk, вот, вопрос как раз в том, как мне инициализировать его?
Я, к сожалению, не знаток js и хотелось бы хотя бы примерно узнать в какую сторону смотреть...
Если я правильно понимаю, мне нужно использовать что-то вроде addEventListener

[Vadym Masiuk]

Максим, Так как у меня нет вашего дом дерева, мне тяжело сказать, но попробуйте вместо Вашего куска кода вот это:

Показать код

function performWork(el, el2){
      el.preventDefault();
      let data = el2.find('input').serialize();
      $.ajax({
        type: "POST",
        url: "delete_me.php",
        data: data,
        success: function(html){
          $("#table_ajax").load('table.php');
          $('#order')[0].reset();
        }
      });
  		$('button[class="close deleter"]').click(listenButton);
      return false;
}

function listenButton(el){
  performWork(el, $(this).closest('tr'));
}

$('button[class="close deleter"]').click(listenButton);

[Максим]

Vadym Masiuk, в таком варианте удаляется только самая первая запись в таблице, а в остальных в data не передаётся значение input.

[Vadym Masiuk]

Ну, без HTML тяжело сказать, покажите полный HTML таблицы, тогда шансы помочь есть

[Максим]

Vadym Masiuk,

spoiler

<form class="center" name="cForm" id="test">
<table class="table table-responsive">
<thead>
<tr>
  <th scope="col">Наименование</th>
  <th scope="col">Количество</th>
   <th>-</th>
</tr>
</thead>
<tbody id="table_ajax">
<?php foreach ($post as $vars): ?>
   <tr>
     <td><?=htmlspecialchars($vars['item_name'], ENT_QUOTES)?></th>
      <td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="<?=htmlspecialchars(round($vars['qty'], 2), ENT_QUOTES)?>"></td>
       <input type="hidden" name="form_id" class="id_inp" value="<?=htmlspecialchars($vars['id'], ENT_QUOTES)?>">
       <td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" data-toggle="tooltip"><span aria-hidden="true">&times;</span></button></td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</form>

Не знаю, есть ли смысл в этом, но вот как выглядит ответ от сервера, который пишется в #table-ajax:

$message = '<tr>';
    foreach ($user as $vars) {
      $message .= '<td>' . $vars['item_name'] . '</td>
      <td><input type="number" min="1" max="10" name="quantity" value="' . $vars['qty'] . '"></td>
      <input type="hidden" name="form_id" value="' . $vars['id'] . '">
      <td><button type="submit" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="' . $vars['id'] . '" data-toggle="tooltip"><span aria-hidden="true">&times;</span></button></td>
      </tr>';
      }
    echo $message;

[Vadym Masiuk]

Максим, выложите пожалуйста полный output HTML формы . То что вы видите в "source code" браузера, до или после AJAX не имеет значения... Код рекомендую прятать в спойлер, так красивше ;)

Как скопировать HTML output

[Максим]

Vadym Masiuk, готово!

Код

<form class="center" name="cForm" id="test">
                    <table class="table table-responsive">
                      <thead>
                        <tr>
                          <th scope="col">Наименование</th>
                          <th scope="col">Количество</th>
                          <th>-</th>
                        </tr>
                      </thead>
                      <tbody id="table_ajax"> 
<tr>
<input type="hidden" name="form_id" value="277">
<td>Тестовый айтем 277</td>
<td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="6"></td>
<td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="277" data-toggle="tooltip"><span aria-hidden="true">×</span></button></td>
</tr>
<tr>
<input type="hidden" name="form_id" value="278">
<td>Тестовый айтем 278</td>
<td><input type="number" class="form-control number" min="1" max="10" name="quantity" value="6"></td>
<td><button type="button" name="delete_item" id="item_delete" class="close deleter" aria-label="Close" value="278" data-toggle="tooltip"><span aria-hidden="true">×</span></button></td>
</tr>
</tbody>
</table>
 </form>

[Vadym Masiuk]

Максим,

Работающий пример на jsFiddle (вместо AJAX использована болванка)

И ещё у вас там несколько проблем в верстке, самые важные:
1. У 'ов не должны быть одинаковые ID
2. должны быть внутри а не сразу в

[Максим]

Vadym Masiuk, спасибо, буду пробовать!
Не очень понятно, у чего именно проблемы в вёрстке, видимо теги обрезались...
Я так понимаю, что у button не должно быть одинаковых id?

[Максим]

Vadym Masiuk, Я попробовал, убрал лишние id на кнопках, но всё равно передаются все значения id из формы, вместо одной нужной...

[Максим]

Vadym Masiuk, Я вас, наверное, уже достал)
Я разобрался как удалять элемент из таблицы в html разметке с помощью this.
Не могу только понять как мне передать в delete_item.php конкретный один form_id

spoiler

(function($) {
    $(document).ready(function() {
        $('.deleter').click(function(e) {
            e.preventDefault();
            $(this).closest('tr').remove(); // или $(this).parent().parent().remove();
        });
    });
}(jQuery));

[Vadym Masiuk]

Максим, Здравствуйте, я вам собственно говорил что id не должны повторятся, они должны быть уникальные. Я думаю будет проще если Вы напишите что хотите отправить, какие данные ожидаете на сервере? Так будет проще. Давайте на примере кнопки 277

[Максим]

Vadym Masiuk, добрый день!
В идеальной ситуации отправляются значения скрытого инпута form_id: 277 и значение quantity: 6. Также важно обозначить, что это именно удаление элемента. Т.е. с каждой строкой можно сделать два действия - изменить количество в инпут quantity и удалить строку. В данном случае я пока рассматриваю только вариант с удалением.

[Максим]

Vadym Masiuk, Вадим, спасибо вам за помощь)
Я разобрался после нескольких дней проб и ошибок)

Answer 1

[Максим]

Правильный вариант был этот, я просто при выводе допустил ошибку - в table.php выводил скрытый инпут за пределами tr, потому и не работало.

тык

$(document).on('click', 'button[name="delete_item"]', function() {
  event.preventDefault();
    let $row = $(this).closest('tr');
    let data = $row.find('input').serialize();
    $.ajax({
            type: "POST",
            url: "delete_item.php",
            data: data,
            success: function(html){
              $("#table_ajax").load('table.php');
              $('#order')[0].reset();
          }
        });
        return false;
    });