javascript運行時庫按鈕click事件

Question

有一個畫廊，可以從數據庫中讀取數據。

在其下面有一些圓圈，顯示所有數據或記錄的數量。

每次圓圈變成黃色時，表示活動的帖子是什么。

我已經通過這種方式生成了這種機制：

function drawCircles(activeIndex) {
    var off_html = '<img class="post_circle" src="../themes/dark/images/off.png"/>';
    var on_html = '<img class="post_circle" src="../themes/dark/images/on.png"  />';
    $('#circles').empty();

    for (var i = 1; i <= pcount; i++) {

        if (i != activeIndex) {
            $(off_html).appendTo($('#circles'));
        }
        else {
            $(on_html).appendTo($('#circles'));
        }

    }


}

PCount =所有帖子的數量...

#circles div是其中有圓圈的酒吧。**

當我們打電話

drawCircles(2)

第二個圓圈變為黃色。 現在我要為此點擊事件。我想了解點擊了哪個圓圈？ 我已經嘗試過.live函數，但是我找不到單擊了哪個圓圈...

Answer 1

嘗試：

$('#circles img.post_circle').on('click', function(e) {
  // e.target is the circle clicked
});

編輯：這是一個更完整的答案：

$(function(){
  var off_html = '<img class="post_circle" src="http://placehold.it/50x50/ff0000"/>';
  var on_html = '<img class="post_circle" src="http://placehold.it/50x50/ffff00"/>';

  var pcount = 5;

  $('#circles').empty();    
  drawCircles(3);

  function drawCircles(activeIndex) {
    for (var i = 1; i <= pcount; i++) {
      if (i != activeIndex) {
        $(off_html).data('index', i).appendTo($('#circles'));
      } else {
        $(on_html).data('index', i).appendTo($('#circles'));
      }
    }
  }

  $('#circles img.post_circle').on('click', function(e) {
    alert($(this).data('index'));
  });
});

這是一個小提琴