function get_answers(){ $('#answers').load("{% url 'answers' question.id%}"); $( "#button" ).click (function() { console.log("click") $.ajax({ type: "POST", url: "{% url 'create_answer' question.id %}", data: $('#form').serialize(), success: function () { get_answers(); $('#text').val(""); }, }); }); }

The handler accumulates. I do not understand why. When processing a click, the form data is sent (adding a new comment), and all comments are uploaded in <div id='answers'> . The form itself and the button on which the handler is hung are not included in this div , and are not loaded again. If you remove the ajax request, the click will not accumulate.

  • one
    maybe because with a successful request, you call the get_answers(); function get_answers(); - Dmitriy Kondratiuk
  • register a click event many times along the way - Jean-Claude
  • @DmitriyKondratiuk Right! Here I am an idiot. I did not notice that the request is inside a function, which is completely unnecessary! I did not plan it in the inside, so I did not even pay attention. - Pavel Saenko

2 answers 2

 function get_answers(){ //Бинд повесили 10 раз $( "#button" ).click (function() { console.log("click button") }); //Бинд снимаем каждый раз перед тем как забиндить $( "#button2" ).unbind("click").click (function() { console.log("click button2") }); } for(var i=0;i<=10;i++){ get_answers(); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button">11 выполнится </button> <button id="button2">1 выполнится </button>

Take off the binds extra

     function get_answers(){ $('#answers').load("{% url 'answers' question.id%}"); } $(document).ready(function() { $( "#button" ).click (function() { console.log("click") $.ajax({ type: "POST", url: "{% url 'create_answer' question.id %}", data: $('#form').serialize(), success: function () { get_answers(); $('#text').val(""); }, }); return false; }); }