点击时,Jquery附加按钮与类

时间:2017-04-27 09:09:19

标签: javascript jquery html class button

我有一个问题,我多次注意到,但仍然无法理解真正的原因。

我有一个脚本,通过点击.btn按钮附加一些#add按钮。

当然要点击.btn按钮。所以我在append()

之后发了一个事件
$(".btn").on('click', function(){

    alert('clicked');

});

此功能可以按我的意思运行。当我创建一个按钮并单击它时,它会提醒我。但问题出现在我创建多个按钮并且我点击其中一个按钮时。它将弹出一个警告,我点击的按钮,以及每个按钮与源代码后面的类。 (例如,如果我创建了3个按钮,如果我点击第一个按钮,它会发出三次警报。如果我点击第二个按钮,它会发出两次警报,如果我点击最后一个,它会发出警报一次。)

我认为它必须是关于一些我尚未完全理解的Javascript概念。这课可能有问题吗?我有点迷路了。

如果你想亲眼看看,这是一个例子:https://jsfiddle.net/nmza0ae4/

提前谢谢!

6 个答案:

答案 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'功能...

&#13;
&#13;
$(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;
&#13;
&#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>