elemento contenedor jquery .on conectado a varios selectores

Question

Estoy utilizando .on() para adjuntar eventos de clic a múltiples elementos que aparecen dinámicamente en la página. El problema que tengo es que cuando agrego .on a un contenedor en la página y deseo adjuntar eventos de clic a múltiples elementos en el contenedor, este último sobrescribe el anterior.

<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> 

En el ejemplo anterior, solo funciona el evento click para id2.

¿Hay alguna forma de evitar esto?

Gracias, Ev.

Answer 1

demostraciónhttp://jsfiddle.net/aRBY4/2/pocas mejoras aquíhttp://jsfiddle.net/aRBY4/5/

Sí su id está mal. :)

Está utilizando la misma identificación, es decir, id1 para ambos elementos.

Espero que esto ayude,

código de código mejorada

poco

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

o

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

o

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

Answer 2

demostración 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) 
});