Javascript事件绑定持久性

如果你有一个不断渲染/销毁的HTML元素，那么对HTML的javascript事件绑定是否仍然存在，或者是否需要在创建/销毁周期中绑定/取消绑定事件？

我正在使用D3生成美国各县的地图。 另外，我正在生成一个工具提示叠加层，其中包含点击事件中的按钮以进行有效选择。

click事件处理程序的一部分，我将模板的HTML绑定到tooltip元素，然后将javascript事件处理程序绑定到所述HTML

thisObj._tooltip.template = template : "
" + "
" + "" + "Prospective Market" + "Market County" + "Remove Market
" 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(); }); } 

由于工具提示仅在屏幕上可见，直到注册了close事件，然后它被销毁，一旦事件监听器绑定到一个元素，当该元素被销毁并重新创建时，该绑定是否仍然存在？

Answer 1

为了使事件处理程序保持不变，您必须在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') 

更新：非常简单的jsfiddle来显示事件委托。