CODEWITHSUNDEEP
javascriptjquery
Tom Albanese
Tom Albanese

Reputation: 173

Dynamically loaded onclick function using in function data

Ok, my coding is a little weak, but I'm learning. I have a code simular to

$.post("test.php", {"data":"data"}, function(grabbed){
    $.each(grab, function(i, item){
        var place = document.getElementById("div");
        var para = createElement("p");
        para.innerHTML = item.name;
        para.onclick = function(){
            document.getElementById(?para?).innerHTML = ?item.price?;
        }
        place.appendChild(para);
    });
}, "json");

My question is how would I use say, item.price in the onclick function. I haven't actually tried yet, but I'm pretty sure that referencing the data retrieved from the request won't work in the dynamically loaded onclick function.

My function works a little differently but the basic principle is on here. Any advise would be appreciated, or perhaps someone can point me in the right direction.

I was thinking of assigning ids to the div or para and using those in the function somehow. I also thought of using cookies to store the data I want, but I can't figure it out. Is there something else I need to know or try.

Upvotes: 0

Views: 50

Answers (2)

Igwe Kalu
Igwe Kalu

Reputation: 14868

Your question concerns the concept of closures in JavaScript.

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.

Consider the following code snippet:

var foo = (function(){
    var remembered = "yea!";

    return function(){
        console.log("Do you remember? - " + remembered);
    };
})();

foo(); // prints: Do you remember? - yea!

That said, looking at your code:

...
// the function assigned to `onclick` should remember
// the variable `item` in the current context.
para.onclick = function(){
    document.getElementById(?para?).innerHTML = ?item.price?;
}
...

That works since you're using JQuery's $.each() for iteration. And here is a demonstration: http://jsfiddle.net/55gjy3fj/

However if you were doing the iteration with a plain for-loop, you would have to wrap the handler inside another closure:

var getHandler = function(para, item){
    return function(){
        document.getElementById(the_id_here).innerHTML = item.price;
    };
};
para.onclick = getHandler(para, item);
...

This fiddle demonstrates the point: http://jsfiddle.net/63gh1gof/

Here's a fiddle that summarises both cases:

Upvotes: 1

Johan Lindskogen
Johan Lindskogen

Reputation: 1306

Since you're already using jQuery, this could be the perfect opportunity to get introduced to .data(). Use it to save an arbitrary object to the dom element, and then reference it later in the onclick-listener.

var para = $('<p/>').html(item.name).data('item', item);
para.click(function() {
    $(this).data('item') // item!!!
});
$('#div').append(para);

Actually, here you could write a more efficient method using jQuery's delegated event handlers.

Just attach the event handler to the parent element:

$('#div').on('click', 'p', function() {
    $(this).data('item') // item!!!
});

Upvotes: 1

Related Questions