javascript - MarkerWithLabel labelContent div onclick 事件

Question

我创建了一个包含多个 DIV 的标记，我希望能够访问各个 DIV 上的点击事件，而不仅仅是整个标记。

这是我的标记:

var marker = new MarkerWithLabel({
  position: myMap.getCenter(),
  map: myMap,
  opacity: 0.0,
  labelContent: "<div id=container>" +
  " <div id=largeDiv" +
  "></div>" +
  " <div id=smallDiv" +
  "></div>" +
  "</div>",
  labelAnchor: new google.maps.Point(width/2, height/2),
  labelClass: "labelClass" // the CSS class for the label
});

为了在“largeDiv”上注册点击事件，这是我尝试过的三种解决方案

$(document).ready(function() { // Works but too early, has no effect
  alert("Solution 1");
  $("#largeDiv").on("click", function() {
  alert("clicked largeDiv");
  });
});
$(document).on('DOMNodeInserted', function(e) { // Does not work
  if (e.target.id == "largeDiv") {
    alert("Solution 2");
    $("#largeDiv").on("click", function() {
      alert("clicked largeDiv");
    });
  }
});
setTimeout(function() { // Works
  alert("Solution 3");
  $("#largeDiv").on("click", function() {
      alert("clicked largeDiv");
  });
}, 1000);

第三个解决方案显然是一个糟糕的解决方案，我宁愿在创建 DIV 后立即添加点击监听器。我怎样才能最好地做到这一点？

CODEPEN

Answer 1

//it works

var div = document.createElement('div'),
    textElem = document.createTextNode('label');
div.appendChild(textElem);
$(div).on("click", function () {
  alert("click");
});

var marker = new MarkerWithLabel({
  position: myMap.getCenter(),
  map: myMap,
  opacity: 0.0,
  labelContent: div,
  labelAnchor: new google.maps.Point(width/2, height/2),
  labelClass: "labelClass" // the CSS class for the label
});