jquery - 表单提交两次(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() 调用造成的。这会在每个复选框上引发一个单击事件，该事件被捕获并再次提交表单。只需删除该行即可。

另请注意，您可以使用 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>