Question

在我的测试代码中，我有一个简单的div，我将其用作5个循环创建的div元素的容器。我尝试向所有5个div元素添加一个click函数，但只给最后一个元素一个click函数。

<div id="testbed"></div>

<script type="text/javascript">
$(document).ready(function () {
    for (i = 0; i < 5; i++) {
        $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>");
        $("#" + i).click(function () {
            alert(i);
        });
    }
});
</script>

有趣的是，它没有警告4，而是警告5.我不知道为什么它只将click函数应用于最后一个div元素而不是第一个4.

Answer 1

您的所有click处理程序共享相同的i变量由于在循环之后，i为5，因此他们都说5。

您需要在一个单独的函数中创建每个处理程序，该函数将i作为参数，以便每个处理程序将获得自己的i。

例如：

function buildElement(i) {
    $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>");
    $("#" + i).click(function () {
        alert(i);
    });
}


for (i = 0; i < 5; i++) {
    buildElement(i);
}

Answer 2

您也可以采取相应的措施：

$.each([1, 2, 3, 4, 5], function(index, value) { 
     $("#testbed").append("<div id='" + index + "'>Hello!</div>");
     $("#" + index).click(function () {
         alert(index);
     });
 });

Answer 3

以下称为javascript闭包。在绑定时，您运行匿名函数，该函数返回在触发事件时执行alert(i)的另一个函数。第一个匿名函数“wrapps”为i创建另一个级别的变量作用域，因此当原始i稍后递增时，匿名函数内的i保持不变。漂亮的小技巧。

<div id="testbed"></div>

<script type="text/javascript">
$(document).ready(function () {
    for (i = 0; i < 5; i++) {
        $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>");
        $("#" + i).click(function (i) {
            return function(evt) {
                // inside here, you have access to the event object too
                alert(i);
            };
        }(i));
    }
});
</script>

javascript closures

的更多信息

顺便说一下，如果你想将点击事件添加到所有div，你不能用.html()替换它们在每个循环中，使用.append()代替，如下所示：

<div id="testbed"></div>

<script type="text/javascript">
$(document).ready(function () {
    for (i = 0; i < 5; i++) {
        $("#testbed").append("<div id='" + i + "'>Hello!</div>");
        $("#" + i).click(function (i) {
            return function(evt) {
                // inside here, you have access to the event object too
                alert(i);
            };
        }(i));
    }
});
</script>

Answer 4

您需要将click事件添加到对象。

    $(function(){

      $('#testbed').empty();       

     for (i = 0; i < 5; i++) {
          $('<div />').text('Hello').attr('id', i).click(function(){
              alert($(this).attr('id'));
          }).appendTo('#testbed');
       }

    });

动态地向DOM元素添加单击函数

4 个答案: