jquery - 自定义控件不响应 Google map Api 中的 jQuery 调用

Question

您能否看一下下面的代码并告诉我为什么我无法推送 Google map 自定义控件来调用 jquery .click() 函数？这是创建 map 元素并分配类(.test)的部分

var controlDiv = document.createElement('div');
var controlButton = document.createElement('button');
controlButton.setAttribute("class", "btn btn-mini btn-success test");
controlButton.innerHTML = 'Control Button';

controlDiv.appendChild(controlButton);

// Add 'div' containing button to the map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);

$('.test').click(function () {
    alert("Handler for");
});

我已经测试了它在 map UI 中工作的代码，但不是在 map 自定义控件格式中!

Answer 1

如果您等到 map 空闲(完成渲染)，那么该按钮就是 DOM 的一部分，并且 jquery 选择器可以工作:

var controlDiv = document.createElement('div');
var controlButton = document.createElement('button');
controlButton.setAttribute("class", "btn btn-mini btn-success test");
controlButton.innerHTML = 'Control Button';

controlDiv.appendChild(controlButton);

// Add 'div' containing button to the map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);

google.maps.event.addListenerOnce(map, 'idle', function() {$('.test').click(function () {
      alert("Handler for");
    });
});

working example