Question

请您查看下面的代码，让我知道为什么我不能推动Google Map Custom Control来调用jquery .click（）函数？以下是创建地图元素和分配类（.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中运行的代码，但没有测试地图自定义控件格式！

Answer 1

如果你等到地图空闲（完成渲染），那么按钮是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

Answer 2

我建议事件委派。它使这种问题变得简单。您不仅可以将此问题用于此Maps API问题，还可以用于需要响应尚未创建的DOM元素上的事件的任何情况，例如使用Ajax调用加载的内容。

我假设您的地图容器<div>的{{1}}为id。

然后，你有这个代码：

map_div

将其更改为：

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

如何工作：不是将事件处理程序附加到尚未创建的$('#map_div').on( 'click', '.test', function () { alert("Handler for"); });元素，而是将其附加到应该已存在的地图容器中，但事件处理函数仍然只响应点击次数创建后的.test元素。

上面的代码适用于jQuery 1.7+。对于1.4.2+，它将是：

.test

自定义控件不响应jQuery调用在Google Maps Api中

2 个答案: