8

I am using .on() to attach click events to multiple elements that appear on the page dynamically. The problem I have is that when I add .on to a container on the page and want to attach click events to multiple elements in the container, the latter overwrites the previous. 

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

In the above example only the click event for id2 works.

Is there a way around this?

Thank you, Ev.

cweston
  • 11,297
  • 19
  • 82
  • 107
evkorres
  • 105
  • 1
  • 5

2 Answers2

14

Demo http://jsfiddle.net/aRBY4/2/ little improvement here http://jsfiddle.net/aRBY4/5/

Yes your id is wrong. :)

YOu are using same id i.e. id1 for both elements.

Hope this helps,

code

bit improved code

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

or

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

or

 $('#container').on("click", "#id1", function(){alert('d1')});
   $('#container').on("click", "#id2", function(){alert('d2')});​
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • just a small suggestion, `id` is not a property. It should be `$(this).attr('id')` – Jashwant Jun 28 '12 at 08:44
  • 1
    @Jashwant `:)` done **But** read this bruv - interesting read - http://stackoverflow.com/questions/5874652/prop-vs-attr `:))` – Tats_innit Jun 28 '12 at 08:57
  • ha ha...I am feeling low now ( I am dumb ). Never knew that. jQuery docs doesnt mention that. I was thinking that they introduced `prop` just for semantics. Many thanks for the link. – Jashwant Jun 28 '12 at 09:04
  • @Jashwant `:)` no worries bruv, have a nice one! oh and how did your `checkbox` question going? `:))` – Tats_innit Jun 28 '12 at 09:06
  • @Tats_innit ids are different sorry for the confusion i miss-typed it here – evkorres Jun 28 '12 at 09:07
  • @evkorres `:)` no probs in any case you can see the working demo in my post `:)` – Tats_innit Jun 28 '12 at 09:09
  • @Tats_innit, its still unanswered. thinking to add bounty – Jashwant Jun 28 '12 at 09:11
  • 1
    @Jashwant lol okies or we should chat one day may be around weekend, I will see if I will get time, its bit late at my end so will bail out soon. `:)` but will defo take a look into your question again and explain it in more detail. `;)` – Tats_innit Jun 28 '12 at 09:13
  • yes it works, but still have the same issue in my actual implementation. I guess it is not a .on issue then will have to look elsewhere. Thank you all. @Jashwant nice read :) – evkorres Jun 28 '12 at 09:17
  • @evkorres Glad it helped! `:)` +1 to you anyways, and by the way read if from my share, but yes @Jashwant good read indeed `:P` – Tats_innit Jun 28 '12 at 09:18
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)
 });
Amol Navsupe
  • 172
  • 1
  • 11