无需触发更改事件即可替换表格

Question

我想验证对服务器具有ajax请求的表单，然后将Web浏览器中的html表单与服务器中的html表单交换，因为从理论上讲这将是一个简单的实现。事实证明，这是一场噩梦，因为触发更改事件，而用户在触发第一个更改事件的第一次交互之后没有进一步交互。因此，正在发生向服务器的ajax请求的无限循环。

html表单位于div中，该div具有类“容器mb-4”。这是JS代码-

        var _cont = $('.container.mb-4')
        var _form = $('.custom-form')

        function ajax_validation(form) {

            form.on('change', 'input, select, textarea', function() {

                form_data = form.serialize()

                    $.ajax({
                        url: "/form/6/",
                        type: "POST",
                        data: form_data,
                        success: function(data) {
                            if(!(data['success'])) {
                                _cont.empty()
                                _cont.append(data['form_html'])
                                form = _cont.find('form')
                                ajax_validation(form)
                            }
                        },
                        error: function () {
                            form.find('.error-message').show()
                        }
                    });


            })
        }

        ajax_validation(_form)

我承担的更改事件已触发，因为服务器返回的表单输入字段具有不同的csrf令牌作为前一个输入字段的值-所有其他字段相同。因此，一个显而易见的解决方案是保留相同的csrf令牌。但是我想了解为什么JS代码不起作用。我认为销毁表单会破坏绑定到该表单的更改事件。因此不知所措来解释这个无限循环。如何更改此设置，以便我可以只交换表单而不会触发另一个更改事件，直到用户确实更改了某些内容为止。

Answer 1

• 不需要在events中使用function并不是一件好事。使用函数进行操作而不是对事件进行处理>>
• 也是您在input , select , textarea处进行序列化的事件，您需要选择closest()表格

尝试下一个代码

var _cont = $('.container.mb-4');
var _form = $('.custom-form');

_cont.on('change', 'form input,form select,form textarea', function() {
      var ThisForm = $(this).closest('form');
      var form_data = ThisForm.serialize();
      $.ajax({
        url: "/form/6/",
        type: "POST",
        data: form_data,
        success: function(data) {
           if(!(data['success'])) {
              _cont.html(data['form_html']);
           }
        },
        error: function () {
           ThisForm.find('.error-message').show()
        }
    });
});