ajax在第一次点击时没有工作，经过2次点击后多次运行

Question

i have a table that its data builds by ajax and afterward on each checkbox click another ajax should run .to get click event on checkbox i take it to a change event and the problem is that first click not work and after 2 times checked checkbox it runs two time.

$('.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();
            }
        });
    });

the ajax return true values but ajax run more than one time and each time run double Previous time.
EDITE:
this is my html code.

<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>

after ajax run a <tr class='sub'> will be added to the table.

Answer 1

If you follow the code flow:

onChange of .subterms >tbody you will append a new click listener to .sub ... on every change!

So each time the element changes, there will be a new click handler. So when you click on .sub, every one of those handlers will be executed.