Question

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

$(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>获取代码，但“理论上”所有元素都附加了不同的事件..

但是如果我在将{al}项附加到<ul></ul>之后我做了其他循环附加元素，就像这样：

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

工作......问题是什么？

Answer 1

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

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

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

1 个答案: