Hello everyone, such a problem has arisen, I am writing on JS recently, I already know a lot about what I knew, but the problem with the increase in code has appeared, I noticed that for example, if you update the internal page (via JS (load, html)), then -both all the functions vserovno turn out to be running and in the end I click on the button - the click is triggered and the function is executed as much as 3 times in some way.

The question is actually: Is it possible to somehow divide or clear the memory after performing the function? It seems there is a return and something else with the event, but if this is the very thing, then I do not know how to use it.

Closed due to the fact that off-topic participants Grundy , user194374, Denis Bubnov , ߊߚߤߘ , fori1ton 10 Feb '17 at 13:10 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Grundy, Community Spirit, Denis Bubnov, fori1ton
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    You have errors in your code, in particular, re-hanging event handlers. - vp_arth
  • Thanks for the comment, this is one of the problems the handlers were in each other - 100ROZH

2 answers 2

return false and event.preventdefault() will not help in this case. But there are such methods:

Solution 1. Off ()

 //при загрузке страницы были какие-то обработчики onClick $("button").click(function(){ console.log("function1") }) //... //через какое-то время $("button").off('click')//Отключаем все обработчики onClick $("button").click(function(){ console.log("function2"); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>test</button>

Solution 2: Assign event handlers only at boot time.

We can put an event handler on an immutable parent, then we will not have to assign functions again after loading and adding content.

This will require .on( events, selector, handler ) Example:

 //Вешаем обработчик только при загрузке страницы: $("#main").on("click","button",function(){ console.log("function1") }) //... //через какое-то время добавляется кнопка: $("#main").append($("<button>test</button>")) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main">

  • Thank you, noted for the most informative answer, I did not know these moments - 100ROJ

To help you. https://learn.javascript.ru/memory-leaks

if you do event handlers

elem.onclick, they are not cleared. also, all variables above the tree are not cleared

 f1() function f1 (){ var a = 'жру память'; f2 () function f2 (){ document.onclick = function () { console.log(a) } } }

Now wherever you click on the document will be displayed in the console)))))))

to clear memory: document.onclick = null;

  • How does this answer relate to the question? - Grundy
  • And where is the leak? A single variable in the closure. Now, if you click another one to click ... - vp_arth
  • As a solution, it will not work, but as a conclusion in the console I will test, thanks too - 100ROZH