jquery - 複数のセレクターにアタッチされたjquery.onコンテナー要素

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>

上記の例では、id2のクリックイベントのみが機能します。

これを回避する方法はありますか？

ありがとう、Ev。

Answer 1

デモ http://jsfiddle.net/aRBY4/2/ ここで少し改善 http://jsfiddle.net/aRBY4/5/

はい、あなたidは間違っています。:)

YOuはid1両方の要素に同じIDを使用しています。

お役に立てれば、

コード

少し改善されたコード

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