jquery. Sull'elemento contenitore collegato a più selettori

Question

Sto utilizzando .on() per allegare eventi di clic a più elementi visualizzati nella pagina in modo dinamico. Il problema che ho è che quando aggiungo .on a un contenitore nella pagina e voglio associare eventi di clic a più elementi nel contenitore, quest'ultimo sovrascrive il precedente.

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

Nell'esempio precedente solo l'evento click per id2 funziona.

C'è un modo per aggirare questo?

Grazie, Ev.

Answer 1

Demohttp://jsfiddle.net/aRBY4/2/piccolo miglioramento quihttp://jsfiddle.net/aRBY4/5/

Sì vostra id è sbagliato. :)

Si sta usando lo stesso identificativo, cioè id1 per entrambi gli elementi.

Spero che questo aiuti,

codice

po 'migliorata codice

$('#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

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) 
});