javascript – How can I use jQuery .on() method in a loop, without overriding the objects on which I loop

I have to assign mousedown events to an objects collection.

But the .on() method seems to override my objects on each turn.

Here\’s a very simplified example of what I have in my code.

The Javascript :

$(document).ready(function() {
    var myArray = {
        0: {\"id\": \"box1\", \"color\": \"blue\"},
        1: {\"id\": \"box2\", \"color\": \"green\"}
    };

    for (i in myArray) {
        box = $(\'div#\'+myArray[i][\'id\']);
        color = myArray[i][\'color\'];
        box.data(\'color\', color);
        box.on({
            mousedown: function() {
                var color = myArray[i][\'color\'];
                $(this).css({\'background\': $(this).data(\'color\')});
                myArray[i][\'color\'] = (i==0) ? \"orange\" : \"pink\";
            }
        });
    }
});

and the HTML :

​<div id=\"container\">
    <div id=\"box1\"></div>
    <div id=\"box2\"></div>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​In addition, you can see it in action here : http://jsfiddle.net/ae3En/6/

Hope someone could help me, thanks.

Rating: 1 out of 5 based on 6 ratings

Posts Related to javascript - How can I use jQuery .on() method in a loop, without overriding the objects on which I loop

• Jul 14th, 2012 node.js - javascript stop an infinite loop Saturday AM 01:11:29


• Jul 16th, 2012 Asynchronous Process inside a javascript for loop Monday AM 02:59:26


• Jul 13th, 2012 How to loop through Nested Json Array with (JavaScript) for loop and display the text Friday AM 09:08:55


• Jul 12th, 2012 javascript - Loop calling an asynchronous function Thursday AM 00:31:55


• Jul 24th, 2012 php - apply a show on hover to a repeating div that changes name Tuesday AM 01:25:01


• Jul 18th, 2012 CSS does not work with Javascript function Wednesday AM 05:59:25


• Aug 01st, 2012 html - JavaScript passing arguments to button onclick functions Wednesday AM 01:16:20


• Jul 31st, 2012 readability - Why are "continue" statements bad in Javascript? Tuesday AM 06:15:37


• Aug 11th, 2012 html - Javascript date of birth conundrum Saturday PM 13:00:09


• Jul 11th, 2012 javascript - Comparing "this" object with Object in DOM Array Wednesday AM 06:39:22

The post javascript – How can I use jQuery .on() method in a loop, without overriding the objects on which I loop appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-how-can-i-use-jquery-on-method-in-a-loop-without-overriding-the-objects-on-which-i-loop.html