2

你能看看下面的代码，让我知道为什么我不能推送谷歌地图自定义控件来调用 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");
});

我已经测试了它在地图 UI 之外的代码，但不是地图自定义控件格式！

4

2 回答 2

3

如果您等到地图空闲（完成渲染），则该按钮是 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");
    });
});

工作示例

于 2013-06-12T05:55:13.953 回答
2

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

让我假设您的地图容器<div>有一个idof map_div。

然后，你有这个代码：

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

将其更改为：

$('#map_div').on( 'click', '.test', function () {
    alert("Handler for");
});

这是如何工作的：它不是将事件处理程序附加到尚未创建.test的元素上，而是附加到应该已经存在的地图容器上——但事件处理程序函数仍然只响应.test创建后的元素上的点击。

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

$('#map_div').delegate( '.test', 'click', function () {
    alert("Handler for");
});
于 2013-06-12T07:13:54.473 回答