ajax не работает при первом клике и после двухкратных кликов запускается несколько раз

Question

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

$('.subterms >tbody').on('change',function () {
        $('.sub').on('click','input',function () {
            let parent = $(this).val();
            if ($(this).is(':checked')){
                $.ajax({
                    url: ajaxurl,
                    type: "POST",
                    data: {
                        'action': 'getChild',
                        'dataType': 'json',
                        'parent': parent
                    },
                    success: function (data) {
                        console.log(data);
                        $(".subterms >tbody").append(data);
                    }
                });
            }
            else{
                let parent = $(this).val();
                $('tr[data-id="' + parent + '"]').remove();
            }
        });
    });

ajax возвращает истинные значения, но ajax запускается более одного раза и каждый раз запускается дважды. Предыдущий раз.
Эдите:
это мой HTML-код.

<table class="form-table subterms">
     <tbody>
        <tr class="sub" data-id="61">
            <td><span>festival</span></td>
            <td>
               <label>
                 <input type="checkbox" name="person-referee[]" value="80">
                 <span>one</span>
               </label>
               <label>
                 <input type="checkbox" name="person-referee[]" value="77">
                 <span>two</span>
               </label>
               <label>
                 <input type="checkbox" name="person-referee[]" value="79">
                 <span>three</span>
               </label>
               <label>
                 <input type="checkbox" name="person-referee[]" value="78">
                 <span>four</span>
               </label>
               <label>
                 <input type="checkbox" name="person-referee[]" value="82">
                 <span>five</span>
               </label>
            </td>
        </tr>
   </tbody>
</table>

после запуска ajax <tr class='sub'> будет добавлено в таблицу.

Answer 1

Если вы следуете потоку кода:

onChange из .subterms >tbody, вы добавите новый прослушиватель кликов к .sub ... при каждом изменении!

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