Question

好吧，我的编码有点弱，但我正在学习。我有一个类似于

的代码

$.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");

我的问题是如何在onclick函数中使用say，item.price。我还没有尝试过，但我非常确定引用从请求中检索到的数据不会在动态加载的onclick函数中起作用。

我的功能有点不同，但基本原则就在这里。任何建议都会受到赞赏，或者有人可以指出我正确的方向。

我正在考虑将div分配给div或para并以某种方式使用函数中的id。我还想过用cookies来存储我想要的数据，但我无法弄明白。还有其他我需要知道或尝试的事情。

Answer 1

您的问题涉及JavaScript中closures的概念。

闭包是指独立（自由）变量的函数。在换句话说，闭包中定义的函数'记住'了它创建的环境。

请考虑以下代码段：

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

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

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

那就是看着你的代码：

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

这是有效的，因为你使用JQuery的$.each()进行迭代。 here是一个示范：http://jsfiddle.net/55gjy3fj/

但是，如果您使用普通的for循环进行迭代，则必须将处理程序包装在另一个闭包中：

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

This fiddle证明了这一点：http://jsfiddle.net/63gh1gof/

Here's这是一个总结两种情况的小提琴：

Answer 2

由于您已经在使用jQuery，这可能是引入.data()的绝佳机会。使用它将任意对象保存到dom元素，然后在onclick-listener中引用它。

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

实际上，在这里你可以使用jQuery的委托事件处理程序编写一个更有效的方法。

只需将事件处理程序附加到父元素：

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

使用函数数据动态加载onclick函数

2 个答案: