Question

我觉得这个问题很傻。我有一个javascript问题，我一直试图解决自春假。

我动态创建div以包含产品的评级。但是当我点击其中一个时，它总是返回最后一个。

    for(var i=0; i < 5; i++) {

        // Create Class called divReview
        var divReview = document.createElement("div");
        divReview.className = "divReview";

        counter_ratings++;
        var s = counter_ratings.toString();
        divReview.id = "ratings" + s;

        divReview.innerHTML = divReview.id;

        $( divReview ).click(function() {               

            alert("You clicked " + divReview.innerHTML);            
        });

        mainContainer.appendChild(divReview);
    }

这里是小提琴： http://jsfiddle.net/alvasay/a9GZq/4/

我很确定这是一个简单的问题，但我无法看到我做错了什么。谢谢！

Answer 1

正如mglison所说，后期绑定。另一种解决方案是在您的点击处理程序中使用this代替divReview来引用要点击的元素。

$( divReview ).click(function() {           
    alert("You clicked " + this.innerHTML);
});

http://jsfiddle.net/a9HAH/

Answer 2

您正在经历延迟绑定。在调用函数时，divReview的值是它在循环中的最后一个值。我通过创建一个函数来解决它，该函数将实际函数包装回来，以便从闭包中获得正确的值：

基本上，代码类似于：

for (...) {
    ...
    var funcMaker = function(divRev) {
        return function() {
            alert("you clicked " + divRev.innerHTML);
        };
    };

   $( divReview ).click(funcMaker(divReview));

}

http://jsfiddle.net/a9GZq/9/

Answer 3

除了mgilson提到的问题之外，你有一个简单的混合使用普通的JS和jQuery。这是一个较短的版本

for (var i = 1; i < 6; i++) {
    var divReview = $('<div id="ratings' + i + '" class="divReview">ratings' + i + '</div>');
    $('#gameContainer').append(divReview);
    divReview.click(function() {           
        alert("You clicked " + this.innerHTML);
    });
}

Javascript Multiple Divs相同的类名但不同的ID。总是在点击其中任何一个时返回最后一个div

3 个答案: