javascript runtime gallery buttons click event

Question

There is a gallery which reads the data from a database.

Below of that there are some circles which shows the number of all data or records.

Each time a circle turns to yellow which indicates that what is the active post.

I have generate this mechanism by this way :

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 = Count of All Posts...

#circles div is a bar which circles are in it.**

when we call

drawCircles(2)

The second circle turns to yellow. Now I want to make a click event for that.I want to understand which circle has been clicked? I have tried .live function , but I can't found that which circle has been clicked...

note : this function will be called every 5 seconds...

S.A.Parkhid
– S.A.Parkhid

2012-10-06 13:59:23 +00:00
Commented Oct 6, 2012 at 13:59 — S.A.Parkhid
– S.A.Parkhid, Commented Oct 6, 2012 at 13:59

Hollister · Accepted Answer · 2012-10-06 14:36:40Z

1

Try:

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

Edit: Here is a fuller answer:

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

Here's a fiddle

edited Oct 6, 2012 at 14:36

answered Oct 6, 2012 at 14:06

Hollister

3,9382 gold badges23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.A.Parkhid Over a year ago

you know , i want the index of circle which was clicked.

Hollister Over a year ago

You could add a data-index attribute to each circle and read that back in the click event handler.

Collectives™ on Stack Overflow

javascript runtime gallery buttons click event

#circles div is a bar which circles are in it.**

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

#circles div is a bar which circles are in it.**

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related