Question

我有一个表，其数据由ajax构建，然后在每个复选框上单击，然后应运行另一个ajax。要在复选框上获取click事件，我会将其带到change事件，问题是第一次单击不起作用，并且经过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

如果您遵循代码流程：

在.subterms >tbody的onChange上，您将在每次更改后向.sub添加一个新的点击侦听器！

因此，每次元素更改时，都会有一个新的点击处理程序。因此，当您点击.sub时，这些处理程序中的每个处理程序都会被执行。

ajax在第一次单击时不起作用，并且在两次单击后运行多次

1 个答案: