动态绑定onclick事件为for循环中的所有按钮提供相同的值

Dynamically binding onclick event gives same value for all buttons in a for loop

本文关键字:按钮 事件 for 循环 动态绑定 onclick      更新时间:2023-09-26

我正在尝试动态创建按钮,并在点击事件中为每个按钮提供警报功能。以下是javascript函数:

function GetTabs(tabObj) {
   for (var t = 0; t < tabObj.views.view.length; t++) {               
        var podObjlen = '';
        var element = document.createElement('input');
        element.id = "btn" + t;
        element.setAttribute("type", "button");
        element.setAttribute("value", "Click");
        element.setAttribute("name", "button");
        podObjlen = tabObj.views.view[t].pod.length;
        document.body.appendChild(element);
        document.getElementById('btn' + t).onclick = (this, "onclick", function {
           alert(podObjlen);                    
        });                
    }
}

无论我点击哪个按钮,警报都会向我显示所有按钮循环中的最后一个值,即长度值被分配给所有警报。它并没有为按钮的每个警报分配独立的值。我试过几种方法,比如:

element.getElementById('btn' + t).onclick = (this, "onclick", function {
    alert(podObjlen);                    
}); 
element.getElementById('btn' + t).onclick = new function () {
    alert(podObjlen);
}

(在这里,它在alertbox中向我显示了正确的值,但我连续一个接一个地收到警报,但当我真正点击按钮时,警报无法启动,即在我的按钮被呈现的那一刻,警报就会启动。希望我说得清楚。我想要的是,当循环运行时,我需要得到实际的值来提醒每个按钮。

Adnan您所观察到的是javascript中臭名昭著的循环问题。这是由于对javascript的工作原理了解较少,在之前的一篇文章中也有讨论

Javascript臭名昭著的循环问题?