提交两次表格（AJAX）

Question

由于某种原因，每次我提交表单时，“网络”标签中的AJAX函数都会被调用两次。 我不知道为什么会这样，我的网站上还有另一个不执行此操作的ajax函数，所以我一定在某个地方出错了。 我看到很多其他人在这里问了这个问题，但是他们的解决方案都没有帮助我。

这是我的完整JS / AJAX代码；

// submit form function
jQuery('#form').on('submit', function(e){
    e.preventDefault();

    var $ = jQuery; 
    var filter = $('#form');
    var form_data = $('#form').serializeArray();
    $('#load_more').data('page', 1);

    $.ajax({
        url: ajax_url,
        type: 'post',
        data: form_data,
        dataType: 'json',
        error : function(response){
            console.log(response);
        },
        success : function(response){
            $('#loop').empty();

            for( var i = 0; i < response.post_cont.length; i++ ){
                var html =''+
                    '<div class="col-4">'+
                        '<a href="'+ response.post_cont[i].permalink +'">'+
                            '<div class="card" style="width: 100%;">'+
                                '<div class="post_image" style="background-image: url('+ response.post_cont[i].image +');"></div>'+

                                '<div class="card-body">'+
                                    '<h5 class="card-title">'+ response.post_cont[i].title +'</h5>'+
                                '</div>'+
                            '</div>'+
                        '</a>'+
                    '</div>';

                $('#loop').append(html);
            }

            if( jQuery('#loop .card').length < response.max_posts[0].no_of_posts){
                $('#load_more').show();
            }else{
                $('#load_more').hide();
            }
        }
    });
});

// button function for form filters
jQuery('#form .option').click(function(){
    var $ = jQuery;
    $('#form .option').removeClass('active');

    var elem = $(this);
    var input = elem.children('input');
    input.click();
    elem.addClass('active');

    $('#form').submit();
});

这是我的html;

<div class="container">
    <form action="" method="POST" id="form">

        <div id="filters">
            <div class="option">
                <p>Assisted Needs/Residential</p>
                <input type="checkbox" name="type[]" value="Assisted Needs/Residential">
            </div>

            <div class="option">
                <p>Commercial</p>
                <input type="checkbox" name="type[]" value="Commercial">
            </div>

            <div class="option">
                <p>Private Housing</p>
                <input type="checkbox" name="type[]" value="Private Housing">
            </div>

            <div class="option">
                <p>Social Housing</p>
                <input type="checkbox" name="type[]" value="Social Housing">
            </div>
        </div>

        <input type="hidden" name="action" value="filter">
    </form>

    <div id="loop" class="row">

    </div>

    <div class="row justify-content-center">
        <div class="col-auto">  
            <a id="load_more" href="javascript:;" data-page="1"><p>More</p></a>
        </div>
    </div>
</div>

Answer 1

该问题归因于您的input.click()调用。 这会在每个复选框上引发一个click事件，该事件将被捕获，然后再次提交form 。 只需删除该行。

还要注意，您可以使用document.ready处理程序中的第一个参数为jQuery变量加上别名，以便删除重复的不必要的var $ = jQuery行。

 jQuery(function($) { $('#form').on('submit', function(e) { e.preventDefault(); var filter = $('#form'); var form_data = $('#form').serializeArray(); $('#load_more').data('page', 1); // your ajax call here... console.log('making an AJAX request...'); }); // button function for form filters $('#form .option').click(function() { $('#form .option').removeClass('active'); $(this).addClass('active'); $('#form').submit(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <form action="" method="POST" id="form"> <div id="filters"> <div class="option"> <p>Assisted Needs/Residential</p> <input type="checkbox" name="type[]" value="Assisted Needs/Residential"> </div> <div class="option"> <p>Commercial</p> <input type="checkbox" name="type[]" value="Commercial"> </div> <div class="option"> <p>Private Housing</p> <input type="checkbox" name="type[]" value="Private Housing"> </div> <div class="option"> <p>Social Housing</p> <input type="checkbox" name="type[]" value="Social Housing"> </div> </div> <input type="hidden" name="action" value="filter"> </form> <div id="loop" class="row"></div> <div class="row justify-content-center"> <div class="col-auto"> <a id="load_more" href="javascript:;" data-page="1"> <p>More</p> </a> </div> </div> </div>