jQuery click() in loop

Question

I created div elements by the loop and I want to change background-color when I click the div.

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.click(changecolor(this));
   c.appendChild(x);
}
function changecolor(p){
  return function() {
    p.css("background-color", "yellow");
 }
}

I follow this Assign click handlers in for loop , but failed...

The value of `this` will be the same for every iteration of the loop, and from the code shown it's not clear what value that is (`window`, if that code is in the global scope). Also, `x` is a DOM element, so its `.click()` method doesn't assign a click handler. — nnnnnn, Nov 30 '16 at 04:06

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

1

Where this does not refer to the element which may refer to the window object instead pass the x as argument and css() is a jQuery method so either you need to wrap it using jQuery or update style property using JavaScript. Although attach click event by setting onClick property.

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.onClick = changecolor(p);
   c.appendChild(x);
}
function changecolor(p){
  return function() {
    p.style.backgroundColor = "yellow";
 }
}

The closure can be avoided here since this context can be accessed within the handler.

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.addEvenetListener('click', changecolor);
   c.appendChild(x);
}
function changecolor(){
   this.style.backgroundColor = "yellow";
}

Refer : addEventListener vs onclick

edited May 23 '17 at 12:13

Community

1
1

answered Nov 30 '16 at 04:06

Pranav C Balan

113,687
23
165
188

`x.click(changecolor(x));` won't work - a DOM element's `.click()` method doesn't assign a click handler... – nnnnnn Nov 30 '16 at 04:08
@nnnnnn : yes you are right, need to use `onClick` or `addEventListener` instead – Pranav C Balan Nov 30 '16 at 04:10
Yep. Although the whole closure-in-a-loop thing wouldn't be necessary at all if the click handler used `this`... – nnnnnn Nov 30 '16 at 04:12
@nnnnnn : I think for that we need to use `addEventListener` or `attachEvent` – Pranav C Balan Nov 30 '16 at 04:15

score 0 · Answer 2 · answered Nov 30 '16 at 04:26

You don't have to add event handler for each elements.

You can try to use only 1 click event.

Check my example below

SIMPLE HTML

<div id="container"></div>

JAVASCRIPT

var c = $("#container");
for(var i=0; i<6;i++){
    $("<div class='sqare'>hello " + i + "</div>").appendTo(c);
}

$(".sqare").on("click",function(){
    $(this).css("background-color","yellow");
});

And live example : https://jsfiddle.net/synz/amnapc70/

jQuery click() in loop

2 Answers2