How to pass an object to an onclick event [duplicate]

Answer 1

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
});

Answer 2

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.

Answer 3

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.

Answer 4

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
    }
}

Answer 5

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);
      }
    }
 }

Answer 6

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.