Get single event on click on div in for loop

Question

var id=100;

for(var i=0;i<5;i++) {
 $("#divtext_"+id).click(function(e) {
   onClicked();
 });
}

function onClicked() {
  alert("Clicked")
}

I tried with .on() , delegate(), and one() events.
When I clicked div, the onClicked() function gave an alert() 4 times.
Is it possible when I click div text/image to get one time function/alert?

You use variable `id` in your loop, that does not change. Did you intend to use `i` in your loop? Currently you set handler for the same component in each iteration, so it fires 4 times. — Eadel, May 03 '14 at 14:11

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

This is how I would expect the code to run under jquery, the options here would be to either use .unbind (http://api.jquery.com/unbind/) to remove all previous instructions for this div or to check if the event has already been bound, this has been covered here. How to check if click event is already bound - JQuery

edited May 23 '17 at 12:06

Community

1
1

answered May 03 '14 at 14:14

andyd_28

161
6

score 0 · Answer 2 · answered May 03 '14 at 14:35

0

Presuming you have divs with IDs divtext_0 ... divtext_4

for(var i=0;i<5;i++) {
 $("#divtext_"+i).click(function(e) {
   onClicked();
 });
}

function onClicked() {
  alert("Clicked")
}

At the moment you are adding multiple click handlers to the div divtext_100 - rather than adding one click handler to multiple divs.

It is hard to say what is best without seeing your HTML - but if you gave all your divs a class, e.g. 'clickable', then you can avoid any loops and make any div with that class clickable.

<div class="clickable"></dvi>

You could simply do.

$(".clickable").click(function(e) {
  onClicked();
});

function onClicked() {
  alert("Clicked")
}

answered May 03 '14 at 14:35

Fraser

15,275
8
53
104

my div id having single id i.e **divtext_100**, actually in my project `$("#divtext_"+id).click(function(e) { onClicked(); });` is in reload function we did not used for loop, example i written for loop instant of reload function. that reload function call click event every 20 seconds. – user3599212 May 03 '14 at 14:51
if i click after 40 seconds i get two alerts, and wait for 60 seconds then i clicked it s given 3 alerts. – user3599212 May 03 '14 at 14:56
Sorry - I have no idea what you are talking about. If you have code that is causing a problem you should include it in the question. – Fraser May 08 '14 at 07:46

score 0 · Answer 3 · edited May 03 '14 at 15:28

0

try this:

$("#divtext_"+id).one("click", function(e){
  onClicked();
});

edited May 03 '14 at 15:28

Uri Agassi

36,848
14
76
93

answered May 03 '14 at 15:05

ravi

161
10

score 0 · Answer 4 · answered May 03 '14 at 15:48

You can use $("#divtext_"+id).off('click',onClicked).on('click',onClicked);

function onClicked() {
    alert("Clicked")
}

'.off' prevents binding of onClicked function multiple times. I think using .off will solve your problem. If you are using older version of jquery then use .unbind.

Get single event on click on div in for loop

4 Answers4