How to pass an object to an onclick event

Question

Possible Duplicate:
Event handlers inside a Javascript loop - need a closure?

I am getting some json object through an API call.It is of the folowing format:-

{data:[{id:"1",name:"some1",url:"someurl1"},{id:"2",name:"some2",url:"someurl2"}...]}

I get it through a jsonp result and it is parsed as below:-

function(results){
   for(var i=0;i<10;i++){
    item=document.createElement("div");
    item.innerHTML=results.data[i].name;
    item.onclick=function(){
        console.log(results.data[i]);  //--->this is where i am stuck 
      }
    }
 }

How do i pass the particular object from the loop to the onclick event. I mean the first div created should have an onclick event with the data of the first object and the second div should have the data from the second object.. Please ask me if any more clarification is required

Edit:- If I do something like this:-

item.onclick=function(){
  console.log(results.data[1])
}

I get that particular object in the onclick event of all the items , but that is not what i want

Edit:- This is how i finally solved it. Thanks to the link pointed to by DCoder.

item.onclick =function(object){
           return function(){
           //do something with the object
           }

         }(obj);

How many times can one answer this question before going daffy? — Shmiddty, Sep 19 '12 at 20:04
@DCoder that really helped.. if only you had posted this as an answer I could have accepted it.. — noname, Sep 19 '12 at 20:12

score 2 · Answer 1 · answered Sep 19 '12 at 20:10

You could always jQuery's data function to store and retrieve the data object:

function(results){
  for(var i=0;i<10;i++){
    item=document.createElement("div");
    item.innerHTML=results.data[i].name;

    // Store object in data 
    $(item).data("results", results.data[i]);

    item.onclick=function(){
        // Retrieve the data needed
        var data = $(this).data("results");
        console.log(data);
      }
    }
 }

score 2 · Accepted Answer · answered Sep 19 '12 at 20:13

2

Quick solution:

function(results){
    for(var i=0;i<10;i++){
        (function(index){ // create a closure, this makes a new scope
            item=document.createElement("div");
            item.innerHTML=results.data[index].name;
            item.onclick=function(){
                console.log(results.data[index]);  //--->this is where i am stuck 
            }
        })(i);  // pass in i
    }
}

answered Sep 19 '12 at 20:13

Shmiddty

13,847
1
35
52

Thanks Shmiddty this really is closest to how i finally solved it.. – noname Sep 19 '12 at 20:16
But do you understand why you were having the problem in the first place? – Shmiddty Sep 19 '12 at 20:17

score 0 · Answer 3 · answered Sep 19 '12 at 19:59

0

The onclick event is fired from jquery when someone clicks on 'item'. You cannot expect custom data to the event handler unless it is triggered using trigger function.

answered Sep 19 '12 at 19:59

Sujith Kp

1,075
3
14
27

1

You're misunderstanding the question. – SLaks Sep 19 '12 at 20:00

score 0 · Answer 4 · answered Sep 19 '12 at 20:06

You're running into trouble with doing async calls inside of js. This is a common problem and it's describe here: http://dojo-toolkit.33424.n3.nabble.com/Advice-on-closures-and-retaining-variable-values-inside-async-handlers-e-g-xhrGet-td3227726.html

Basically the value of i is equal to 9 by the time your console.log is actually ran.

There are many ways to solve this problem in general, but your specific solution should probably be to restructure things immensely. Consider this alternative (requires jQuery), but we could do the same without it very easily.

$.each(results, function(data) {
  var $el = $("<div></div>").html(data.name).click(function() { console.log(data) });
})

But it would be even better to use jQuery.data() to store things and then use .on() or .delegate() to listen for the click events like this

$.each(results, function(data) {
  var $el = $("<div></div>").addClass("yourThing").html(data.name).data("data", data);
})

// replace window with a closer parent if one exists
$(window).on("click", ".yourThing", function() {
   console.log($(this).data("data")); // retrieve data from jquerys .data() store
});

score 0 · Answer 5 · answered Sep 19 '12 at 20:14

0

Add a hidden field inside your div (created in loop), keep whatever you want in it. then on click of div. find hidden field inside it(div) and read its value.

answered Sep 19 '12 at 20:14

Sujith Kp

1,075
3
14
27

Fabrício Matté · Answer 6 · 2012-09-19T20:26:33.590

I'd personally use $.map so the function callback creates a new execution context for each iteration.

As you've tagged the question with jQuery, your code can be as simple as

$($.map(data, function(v, i) {
    return $('<div>').html(data[i].name).click(function() {
        console.log(data[i]);
    });
})).appendTo('body'); //appending for demonstration purposes

Fiddle

Of course, you have to wrap it inside a function and pass the data array of objects as you were doing previously.

How to pass an object to an onclick event

6 Answers6

Linked