我是一名有用的助手,可以为您翻译文本。
但是它没有起作用。我还尝试添加以下jQuery代码(我正在使用Bootstrap,点击弹出窗口应该显示一个模态框):
我第一次使用Leaflet库,想要为每个标记添加一个弹出窗口的点击事件监听器。
这是我的代码:
for (var i = 0; i < users.length; i++) {
var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
.on('mouseover', function() { this.setIcon(iconOn); })
.on('mouseout', function() { this.setIcon(iconOff); })
.addTo(map);
var myPopup = L.popup()
.setContent("<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>");
marker.bindPopup(myPopup).openPopup();
}
我尝试将MouseEvent附加到弹出窗口,在将myPopup
绑定到标记之前进行此操作:
myPopup.on('click', function() { alert("Hello"); })
但是它没有起作用。我还尝试添加以下jQuery代码(我正在使用Bootstrap,点击弹出窗口应该显示一个模态框):
$("#info").click(function() {
$("#userTitle").html(users[i].title).html();
$("#userAddr").html(users[i].addr).html();
$("#userDesc").html(users[i].desc).html();
$("#userDetails").modal("show");
});
这是 HTML 代码:
<?php
$title = "Map";
$scriptsH = array('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js', 'js/showmap.js');
require_once('header.php');
?>
<div class="cointainer">
<div id="map-canvas">
</div>
</div>
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="userTitle"></h4>
</div>
<div class="modal-body">
<p id="userDesc"></p>
<p id="userAddr"></p>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<?php
require_once('footer.php');
?>
但它只对已经打开弹出窗口的第一个标记起作用。
你知道任何解决方法或正确的操作方式吗?
onclick
监听器添加到弹出内容(根元素)。 - Vigneswaran Marimuthudocument.getElementById("info").addEventListener("click", function() { console.log("hello"); });
但它的行为与$("#info").click()
相同。 - smartmouse