Question

我真的不知道发生了什么事......

代码如下：

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
}

我正在尝试为显示游览名称的每个按钮绑定click事件，但始终显示最后一个游览名称，无论我点击哪个按钮。

我做错了什么？

谢谢！

Answer 1

在for循环继续运行之前，您需要将单击处理程序包装在闭包中以“隐藏”变量name的值。

这是因为在你点击它之前实际上并没有执行处理程序，所以否则它只会在那时使用当前值name（无论循环中的最后一个值是什么）。

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    (function(n) {
        $tourButton.click(function() {
            alert(n);
        });
    })(name)
}

Answer 2

触发点击后，j的值为tours.length。您可以通过闭包锁定循环值以及其余变量。

for (var j=0; j<tours.length; j++){
  (function(){ 
    var currentJValue = j;
    var name = tours[currentJValue].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
  })();
}

Answer 3

无需在循环内调用click事件。覆盖动态创建的按钮并在循环外调用它并使用委托事件

试试这个

 $(document).on('click','div.button-inside',function() {
    alert($(this).text());
}

如果您想了解有关委托活动的更多信息，可以浏览link

Answer 4

试试这个......

$('.div.button-inside ').on('click',function() {
    alert($(this).text());
}

里面的JQuery点击事件

4 个答案: