Почему мой пост jquery внутри другой функции отправляет несколько раз?

Question

Я работаю в простой пост jquery. У меня есть список объектов, и когда пользователь нажимает на объект в списке, я меняю несколько js-варов для создания почтового запроса с этими данными. Это мой html-код.

<ul> 
    <li data-selected-option="1"> 
     <a herf="javascript:void(0)" class="option">1</a> 
    </li> 
    <li data-selected-option="2"> 
     <a herf="javascript:void(0)" class="option">2</a> 
    </li> 
    <li data-selected-option="3"> 
     <a herf="javascript:void(0)" class="option">3</a> 
    </li> 
</ul> 

<div class="modal fade" id="optionmodalsettings" tabindex="-1" role="dialog" aria-labelledby="optionmodalsettings" aria-hidden="true"> 
    ... 
    ... 
    <a href="javascript:void(0)" class="send_option_post">Send</a> 
    ... 
    ... 
</div> 

и это мой код javascript.

$(function() { 
    var post_url ="my_post_url"; 

    $(".option").on('click', function() { 
     $('#optionmodalsettings').modal(); 
     var selected_option = $(this).closest('li').data('selected-option'); 

     $('.send_option_post').on('click', function() { 
      $.post(update_website_noty_url, {selected_option: selected_option}, function (response) { 
       $('#optionmodalsettings').data('modal', null); 
       console.log(response); 
      }); 
     }); 
    }); 
}) 

Whean пользователь попал элемент списка, изменить selected_option вар через яваскрипт и открыть boostrap модальность. При открытии загрузочного модального файла пользователь может нажать кнопку .send_option_post внутри модаля для отправки отправки запроса в качестве параметра selected_option var. В первый раз все работает нормально, но если пользователь нажимает элемент anocther и отправляет почтовый запрос, пост отправляется два раза, и если пользователь снова удаляет элемент в списке и щелкает .send_option_post, запрос отправляется три раза, и должен быть только после запроса кликом. Почему это происходит? Огромное спасибо.

Answer 1

Каждый раз, когда пользователь нажимает на .option, вы добавляете еще один обработчик кликов в .send_option_post. Поэтому, если пользователь нажимает на 3 варианта, затем нажимает на .send_option_post, он будет отправлять 3 раза.

Вы должны привязать обработчик кликов .send_option_post только один раз, а не каждый раз, когда пользователь нажимает на .option. Переместите переменную selected_option во внешнюю область обеих функций.

$(function() { 
    var post_url ="my_post_url"; 
    var selected_option; 

    $(".option").on('click', function() { 
     $('#optionmodalsettings').modal(); 
     selected_option = $(this).closest('li').data('selected-option'); 

    }); 
    $('.send_option_post').on('click', function() { 
     if (selected_option === undefined) { 
      alert("You need to select an option first"); 
     } else { 
      $.post(update_website_noty_url, {selected_option: selected_option}, function (response) { 
       $('#optionmodalsettings').data('modal', null); 
       console.log(response); 
      }); 
     } 
    }); 
});