Unable to get Raphael sketchpad skecthpad.json() on skecthpad.change() function when skecthpad instantiated inside a loop

Question

var change_sample = [];
$(document).ready(function () {
    /* Create sketchpad for all elements */
    for (var i = 1; i <= 32; i++) {
        var temp = "tooth" + (i);
        change_sample[i] = Raphael.sketchpad(temp, {
            width: 57,
            height: 85,
            editing: true
        });
    }
    /* bind change event to all skecth pad objects */
    for (var j = 1; j <= change_sample.length; j++) {
        //          var temp = "tooth" + (j);
        change_sample[j].change(function () {
            alert("sdfgsd"`enter code here` + $(this).json());
        });
    }

I am able to get inside the change event i.e getting the alert but unable to get change_sample[j].json() or $( this ).json() . Thanks in advance

Answer 1

This got resolved by the following ..

       change_sample.forEach(function(item ,index) {           
        item.change(function() {
            alert("sdfgsd" +  item.json() + "index" + index);

        });
    })

gives you get a reference to the original collection Difference in Jquery.each() and Array.prototype.forEach() method

But does not work for IE 7,8 would have to apply ES-5 shim to make this work there