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

ツールチップは、close イベントが登録されてから破棄されるまで画面にしか表示されないため、イベント リスナーが要素にバインドされると、その要素が破棄されて再作成されたときに、そのバインドは保持されますか?

4

1 に答える 1