jquery .on phần tử vùng chứa được đính kèm với nhiều bộ chọn

Question

Tôi đang sử dụng .on() để đính kèm các sự kiện nhấp vào nhiều yếu tố xuất hiện trên trang động. Vấn đề tôi gặp phải là khi tôi thêm .on vào vùng chứa trên trang và muốn đính kèm các sự kiện nhấp chuột vào nhiều yếu tố trong vùng chứa, sau đó sẽ ghi đè lên các phần tử trước đó.

<div id="container"> 
    <!-- elements here appear dynamically --> 
    <div id="id1"></div> 
    <div id="id1"></div> 
</div> 

<script> 
    $('#container').on("click", "#id1", function(){}); 
    $('#container').on("click", "#id2", function(){}); 
</script> 

Trong ví dụ trên chỉ có sự kiện nhấp cho tác phẩm id2.

Có cách nào khác không?

Cảm ơn bạn, Ev.

Answer 1

Demohttp://jsfiddle.net/aRBY4/2/chút cải tiến ở đâyhttp://jsfiddle.net/aRBY4/5/

Có id của bạn là sai. :)

YOu đang sử dụng cùng một id tức là id1 cho cả hai yếu tố.

Hope this helps,

đang

chút cải tiến đang

$('#container').on("click", "#id1, #id2", function() { 
    alert($(this).prop('id')) // you can use --> attr('id') 
});​ 

hay

$('#container').on("click", "#id1, #id2", function() { 
     alert($(this).attr('id')) 
    });​ 

hay

$('#container').on("click", "#id1", function(){alert('d1')}); 
    $('#container').on("click", "#id2", function(){alert('d2')});​ 

Answer 2

Demo https://jsfiddle.net/amol9supe/w18ktftb/3/

<div id="container"> 
    //Elements here appear dynamically 
    <div id="id1" class="common-id">hulk</div> 
    <div id="id2" class="common-id">rambo</div> 
</div> 

<!-- Script Here --> 
$('#container').on("click", ".common-id", function() { 
    alert(this.id) 
});