我有一个问题,我多次注意到,但仍然无法理解真正的原因。
我有一个脚本,通过点击.btn
按钮附加一些#add
按钮。
当然要点击.btn
按钮。所以我在append()
:
$(".btn").on('click', function(){
alert('clicked');
});
此功能可以按我的意思运行。当我创建一个按钮并单击它时,它会提醒我。但问题出现在我创建多个按钮并且我点击其中一个按钮时。它将弹出一个警告,我点击的按钮,以及每个按钮与源代码后面的类。 (例如,如果我创建了3个按钮,如果我点击第一个按钮,它会发出三次警报。如果我点击第二个按钮,它会发出两次警报,如果我点击最后一个,它会发出警报一次。)
我认为它必须是关于一些我尚未完全理解的Javascript概念。这课可能有问题吗?我有点迷路了。
如果你想亲眼看看,这是一个例子:https://jsfiddle.net/nmza0ae4/
提前谢谢!
答案 0 :(得分:2)
尝试此操作:当您向按钮用户$(".btn").on('click'..
添加点击处理程序时,它将仅在该时间点添加可用按钮。
要将点击处理程序添加到动态添加的按钮,请使用下面的代码
$(document).on('click',".btn", function(){
alert('clicked');
});
答案 1 :(得分:1)
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
$(".btn").on('click', function(){
alert('clicked');
});
});
您正在做的是在每次点击时添加事件处理程序。添加新按钮时,新的事件处理程序将附加到按钮,因此会在范围外添加多个alert.Put事件处理程序
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
$(document).on('click',".btn", function(){
alert('clicked');
});
答案 2 :(得分:1)
您可以使用$(document).on('click'
功能...
$(document).ready(function(){
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
});
$(document).on('click',".btn", function(){
alert('clicked');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">
Add
</button>
&#13;
答案 3 :(得分:1)
当添加按钮添加到dom时,您将需要event delegation。添加按钮标记的代码看起来很好。
$(document).ready(function(){
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
});
$(document).on("click",'.btn', function(){
alert('clicked');
});
答案 4 :(得分:1)
您可以在绑定事件之前取消绑定事件。
$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
$(".btn").off("click");
$(".btn").on("click",function(){
alert('clicked');
})
});
或者您可以为所有动态添加的按钮(如
)全局编写click事件$('#add').click(function(){
$('html').append('<button class="btn">Test</button>');
});
$(document).on('click',".btn",function(){
alert('clicked');
});
但标准方式是第二种方式。 https://jsfiddle.net/Rishi0405/nmza0ae4/2/
答案 5 :(得分:0)
试试这个:
<script type="text/javascript">
var geocoder;
var map;
var addresses = [
"UNIT 1A LOWER TINAHISK SOUTH QUAY ARKLOW co.wicklow",
"UNIT 4 INDUSTRIAL ESTATE DONORE ROAD DROGHEDA CO LOUTH"
]
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Geocode each address
addresses.forEach( function(address) {
geocode(address)
});
}
// Function to geocode addresses
function geocode(address) {
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
}
);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div id="map_canvas" style="width:750px; height:750px">
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>