How to automatically bind multiple event handlers with a loop in jQuery

Question

I am working on a simple app that simulates a chess board. Therefore I have a table with 64 squares. I would like to bind event handlers for each square by writing a single function that goes through a loop instead of writing things out 64 times. EDIT: Please note I want the handlers to return a numeric value to indicate which div was clicked. I don't need the handlers to return the content of the divs. Here is a simplified version given two clickable divs:

<div id="div0">A box</div>
<div id="div1">Another box</div>
<div id="say"></div>

and the javascript code:

$("#say").append("Which div are you going to click? ");

function clicky() {
    var i = 0;
    while (i < 2) {
        $("#div" + i).on("click", function () {
            $("#say").append("div" + i);
        });
        i++;
    }

}

clicky();

Here is the jsfiddle.

The function almost works, that is, it binds to both divs, but it binds the same (wrong) handler to both of them. Not sure how to fix this.

jsfiddle.net/q53y3L4q/6

adeneo
– adeneo

2014-12-26 09:17:41 +00:00
Commented Dec 26, 2014 at 9:17 — adeneo
– adeneo, Commented Dec 26, 2014 at 9:17
For your info, you are facing closure here

Zudwa
– Zudwa

2014-12-26 09:23:58 +00:00
Commented Dec 26, 2014 at 9:23 — Zudwa
– Zudwa, Commented Dec 26, 2014 at 9:23

Satpal · Accepted Answer · 2014-12-26 09:24:04Z

4

Use a common class. Then you can use Class Selector (“.class”) to bind event

HTML

<div class='myDiv' id="div0">div0</div>
<div class='myDiv' id="div1">div1</div>
<div id="say"></div>

Script

$("#say").append("Which div are you going to click? ");
$(".myDiv").on("click", function () {
    $("#say").append(this.id);
});

DEMO

edited Dec 26, 2014 at 9:24

answered Dec 26, 2014 at 9:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Satpal Over a year ago

Have I missed something?

Lee Soo Over a year ago

Not sure why the down vote. I like the use of this.id. It makes sense to me. Thanks!

Jay · Accepted Answer · 2014-12-26 09:11:22Z

0

Attaching event to 64 squares is not the right approach here. You should use event bubbling here. Attach the event to container of 64 squares. Then if the event is captured, you can figure out the event target.

Read about event bubbling from the resource: http://javascript.info/tutorial/bubbling-and-capturing

answered Dec 26, 2014 at 9:11

Jay

1,4781 gold badge10 silver badges9 bronze badges

Comments

Umesh Sehta · Accepted Answer · 2014-12-26 09:13:42Z

0

try this:-

$("#say").append("Which div are you going to click? ");
function clicky()
{
var i = 0;
for(i;i<=2;i++)
{
    $('#div'+i).on('click',function(){
    $("#say").append($(this).html());
    });
 }

}

clicky();

Demo

answered Dec 26, 2014 at 9:13

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

1 Comment

mplungjan Over a year ago

Using a class makes nuch more sense than a loop

Collectives™ on Stack Overflow

How to automatically bind multiple event handlers with a loop in jQuery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related