Форма подается дважды (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() звонком.Это вызывает событие щелчка на каждом флажке, который перехватывается и, в свою очередь, отправляет form снова.Просто удалите эту строку.

Также обратите внимание, что вы можете создать псевдоним переменной jQuery, используя первый аргумент в обработчике document.ready, поэтому вы можете удалить повторяющуюся ненужную строку 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>