If you have a HTML element that is constantly rendered/destroyed, do the Javascript event bindings to the HTML persist, or is it necessary to bind/unbind events as part of the creation/destruction cycle?

I'm using D3 to generate a map of the counties in the US. In addition, I'm generating a tooltip overlay that includes buttons upon a click event for a valid selection.

Part of the click event handler where I bind the HTML of the template to the tooltip element and then bind the Javascript event handlers to said 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);

I bind the event handlers to the elements via

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();
   });
}

Since a tooltip is only visible on the screen until a close event is registered, and then it is destroyed, once an event listener is bound to an element, does that binding persist when that element is destroyed and re-created?

If you have a HTML element that is constantly rendered/destroyed, do the Javascript event bindings to the HTML persist, or is it necessary to bind/unbind events as part of the creation/destruction cycle?

I'm using D3 to generate a map of the counties in the US. In addition, I'm generating a tooltip overlay that includes buttons upon a click event for a valid selection.

Part of the click event handler where I bind the HTML of the template to the tooltip element and then bind the Javascript event handlers to said 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);

I bind the event handlers to the elements via

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();
   });
}

Since a tooltip is only visible on the screen until a close event is registered, and then it is destroyed, once an event listener is bound to an element, does that binding persist when that element is destroyed and re-created?

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Apr 11, 2021 at 18:01 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 26, 2013 at 15:38 JasonJason 11.4k2222 gold badges9393 silver badges185185 bronze badges 3

• An event handler is bound to the DOM element. If the element is destroyed, so are the event handlers (or at least the binding). – Felix Kling Commented Sep 26, 2013 at 15:42
• So there is no possibility for unattached event handlers to exist if the DOM element is destroyed? – Jason Commented Sep 26, 2013 at 15:44
• @Jason check my answer, you need to use event delegation. – vittore Commented Sep 26, 2013 at 15:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

In order for event handlers to persist you have to use event delegation in jquery

instead of

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

use

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

for instance

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

This way you attach event handler to body element instead of actual element you can destroy or add to DOM. So handlers will work untill your turn them off.

Even better for all global event handlers you can use event namespaces, like:

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

This will allow you to off all of them together:

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

UPDATE: very simple jsfiddle to show event delegation.