关于动态元素中循环中的事件

On events in loop in dynamic elements

本文关键字：循环 事件 元素 于动态 动态      更新时间：2023-09-26

我需要将事件设置为"动态"元素，如var X = $('HTML CODE HERE')，但当我将事件设置到最后一个元素时，所有其他元素都会获得最后一个事件。

此处的示例：http://jsfiddle.net/QmxX4/6/

$(document).ready(function() {
    var ulItem = $('.lst');
    for (var x=0; x<5; x++) {
        var newItemElement = $('<li style="border:solid 1px blue;width:200px;height:40px;"></li>');
        ulItem.append(newItemElement);
        var generator = Math.random();
        newItemElement.on('click', function() {
            console.log(generator);  
        });
    }
});

所有元素都是不同的，我直接将事件附加在元素中，我尝试在添加事件之前和之后将事件附加到元素中，但不起作用，所有元素都得到最后一个事件。

如果您在<li></li>中单击，则会在最后一个事件中生成代码，但"理论上"所有元素都附加了不同的事件。。

但是，如果我在将所有项目附加到<ul></ul>之后进行其他循环附加元素，如下所示：

$.each($(ulItem).children('li'), function(i, item) {
    console.log($(this));
    var generator = Math.random();
    $(this).on('click', function() {
         console.log(generator);
    });
});

工作。。。问题出在哪里？

在第一个循环中，generator变量属于ready回调函数，内部日志函数都共享它。

在第二个循环中，generator变量属于each回调函数，该函数对每个项调用一次，因此日志函数都会看到不同的变量。

相关文章：