1

如果您有一个不断呈现/销毁的 HTML 元素，那么与 HTML 的 Javascript 事件绑定是否会持续存在，或者是否有必要将绑定/取消绑定事件作为创建/销毁周期的一部分？

我正在使用 D3 生成美国各县的地图。此外，我正在生成一个工具提示覆盖，其中包括单击事件时的按钮以进行有效选择。

单击事件处理程序的一部分，我将模板的 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();
   });
}

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

4

1 回答 1

14

为了让事件处理程序持续存在，您必须在 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 来显示事件委托。

于 2013-09-26T15:43:44.917 回答