События и элементы DOM

Question

Предположим, что у меня есть страница с раскладкой из двух столбцов, где левый столбец представляет собой набор ссылок, и он загружает связанную html-страницу/шаблон в правый столбец при нажатии этой ссылки.

При загрузке шаблона есть обработчик шаблон, который инициализируется как одноточечного через requirejs и определяет некоторые методы и обработчики, как:

SomePage.prototype.saveHandler: function(e) { ... }; // Page handler has a handler 

SomePage.prototype.initialize: function() { 
    $('#btnSave').on('click', saveHandler); 
} 

Тогда я прикрепление события DOM через метод инициализации каждого время загрузки страницы.

SomePage.initialize(); // This attaches the click event 

Теперь, когда я нажимаю другую ссылку на левой стороне, другой шаблон страницы загружается и выше процесс повторяется для этой страницы.

Мне интересно, что происходит с событием клика, которое ранее было прикреплено к элементу btnSave? Является ли это теперь зависающим обработчиком событий в кеше jQuery?

Если я попытаюсь удалить его, когда одна и та же страница загрузится снова, действительно ли она удалит исходное событие?

$('#btnSave').off('click', saveHandler); 

Выполняет ли следующий блок предотвращение утечки памяти/оборванных ссылок?

// The potential problem here is that btnSave is part of the newly loaded template 
// and not the element i attached the handler to earlier (which doesn't exist anymore) 
$('#btnSave').off('click', saveHandler); 

$('#btnSave').on('click', saveHandler); 

Каков наилучший способ гарантировать, что я не получаю оборванных ссылок и утечек памяти. Это потенциальный вопрос для простого javascript. Я понимаю, что приведенное выше не будет работать, когда страница шаблона будет обновлена. Я собираюсь экспериментировать с ним в то же время, но было бы неплохо узнать, как это делают специалисты. Благодаря!

Answer 1

Когда вы загружаете новый tmpl, вам нужно прикрепить событие только для этого. Например:..

$ ("# btnSave", $ (newly_tmpl)) на ("клик", .....

Answer 2

Взгляните на этот слайд с Энди Osmani Javascript гуру Вы будете найти ответ на вопрос о утечке памяти и циклических ссылках здесь: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

Answer 3

Вместо крепления события нажатия на кнопку, вы должны прикрепить на функции щелчка по времени кнопки запуска после шаблона нагрузки, как этого

var element = $("<div id='tempDiv' class='main_container o-hidden'><button value='Click' id='btnSave'/></div>"); 

$("#btnSave",element).each(function(){ 
    $(this).attr("onclick","tryMe();"); 
}); 

It. добавит функцию tryMe click к вашему b utton, элементная переменная должна быть создана из вашего содержимого шаблона.

Answer 4

Почему бы не просто сделать его более делегированное событие и только зарегистрировать его один раз:

$(".someParentThatsAlwaysOnPage #btnSave").on("click", function() { 
    var somePage = getMeContextOfProperObject(); 
    somePage.saveHandler(); 
}); 

Таким образом, событие щелчка только один раз и связанного JQuery обновит сферу слушателя, как изменяется DOM. Все, что вам нужно сделать, это предоставить средства для получения надлежащего объекта. Не видя больше своего кода, я не могу вам помочь.