Перенос привязки события Javascript

Question

Если у вас есть элемент HTML, который постоянно отображается/уничтожается, сохраняются ли привязки событий javascript к HTML, или необходимо связывать/развязывать события как часть цикла создания/уничтожения?

Я использую D3 для создания карты графств в США. Кроме того, я создаю наложение всплывающей подсказки, которая включает кнопки при событии click для допустимого выбора.

Части обработчика событий нажмите где я связать HTML шаблона к элементу подсказки, а затем связать с JavaScript обработчиков событий в указанном HTML

thisObj._tooltip.template = template : "<div id = 'tooltip_template'>" + 
      "<div class = 'county_data'></div>" + 
      "<img src = '/static/images/delete.png' width = '28' height = '28' class = 'delete_logo' id = 'close_tooltip' />" + 
      "<button id = 'add_prospective_market' class = 'tooltip_button'>Prospective Market</button>" + 
      "<button id = 'add_market' class = 'tooltip_button'>Market County</button>" + 
      "<button id = 'remove_market' class = 'tooltip_button'>Remove Market</button></div>" 

thisObj._tooltip.tooltip.html(thisObj._tooltip.template) 
    .style("left", (d3.event.pageX + 10) + "px") 
    .style("top", (d3.event.pageY - 50) + "px") 
    .style("pointer-events" , "auto") 
    .style("width", "400px") 
    .style("height", "150px"); 

$(".county_data").text(d.name + ", " + d.properties.StateCode); 

addTooltipHandlers(); 

thisObj._tooltip.tooltip.transition() 
.duration(800) 
.style("opacity", 1); 

Я связываю обработчик событий к элементам через

var addTooltipHandlers = function(){ 
    $("#add_market").on("click", function(){ 
    console.log("Adding new Market") 
    }); 

    $("#add_prospective_market").on("click", function(){ 
    console.log("Adding new Prospective market") 
    }); 

    $("#remove_market").on("click", function(){ 
    console.log("Removing this market") 
    }); 

    $("#close_tooltip") 
    .on("mouseover", function(){ 
     $(this).css({"border-color" : "red", "opacity" : 1}); 
    }) 
    .on("mouseout", function(){ 
     $(this).css({"border-color" : "black", "opacity" : 0.5}); 
    }) 
    .on("click", function(){ 
     console.log("Closing tooltip"); 

     d3.selectAll($("#" + thisObj._tooltip.county)) 
     .style("fill", thisObj._currentCounty.color); 

     thisObj._tooltip.tooltip.transition() 
     .duration(500) 
     .style("opacity", 0) 
     .style("pointer-events", "none"); 

     thisObj._tooltip.open = false; 
     removeTooltipHandlers(); 
    }); 
} 

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

Answer 1

для того, чтобы обработчики событий упорствовать вы должны использовать event delegation в JQuery

вместо

$(...).on(event, handler) 

использования

$(...).on(event, selector, handler) 

, например

$('body').on('click','a.saveButton', saveHandler) 

Таким образом вы присоединяете обработчик событий к элементу body вместо фактического элемента, который вы можете уничтожить или добавить в DOM. Поэтому обработчики будут работать до тех пор, пока вы их не отключите.

Еще лучше для всех глобальных обработчиков событий, которые можно использовать пространство имен событий, как:

$('body').on('click.app','a.saveButton', saveHandler) 
$('body').on('click.app','a.addButton', addHandler) 

Это позволит вам off все вместе:

$('body').off('.app') 

UPDATE: очень просто jsfiddle к показать событие делегирование.