jquery। एकाधिक चयनकर्ताओं से जुड़े कंटेनर तत्व

Question

मैं गतिशील रूप से पृष्ठ पर दिखाई देने वाले कई तत्वों पर क्लिक ईवेंट संलग्न करने के लिए .on() का उपयोग कर रहा हूं। मेरी समस्या यह है कि जब मैं पृष्ठ पर एक कंटेनर में .on जोड़ता हूं और कंटेनर में एकाधिक तत्वों पर क्लिक ईवेंट संलग्न करना चाहता हूं, तो बाद वाले ने पिछले को ओवरराइट किया है।

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

उपर्युक्त उदाहरण में केवल आईडी 2 कार्यों के लिए क्लिक ईवेंट।

क्या इसके आसपास कोई रास्ता है?

धन्यवाद, ईवी।

Answer 1

डेमोhttp://jsfiddle.net/aRBY4/2/थोड़ा यहाँhttp://jsfiddle.net/aRBY4/5/

सुधार हाँ अपने id गलत है। :)

योयू दोनों तत्वों के लिए एक ही आईडी i.e. id1 का उपयोग कर रहे हैं।

आशा इस मदद करता है,

कोड

सा बेहतर कोड

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

या

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

या

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

Answer 2

डेमो 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) 
});