javascript - jQuery 事件绑定(bind)按值传递

标签 javascript jquery jquery-events pass-by-value

以下页面显示五个按钮,单击每个按钮都会收到警报“5”。我希望当我点击第一个按钮时,我得到警报“1”,第二个按钮“2”......等等。

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="nums"></div>
        <script type="text/javascript">
            var nums = [1,2,3,4,5];
            for(var i in nums){
                var num = nums[i];
                var btn=$('<button></button>').text(num).click(function(){alert(num);});
                $('#nums').append(btn);
            }
        </script>
    </body>
</html>

最佳答案

JavaScript 只有函数作用域,因此在您的示例中只有一个 num,它不断被修改,并且在调用 click 事件时,它等于 5。要解决这个问题,您必须创建正确的 closure具有新的功能范围,如下所示:

var nums = [1,2,3,4,5];
var createClick = function (num) { return function() { alert(num); }; };
for(var i in nums){
    var num = nums[i];
    var btn=$('<button></button>').text(num).click(createClick(num));
    $('#nums').append(btn);
}  

关于javascript - jQuery 事件绑定(bind)按值传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6824870/

相关文章:

javascript - 如何使用 AngularJS 处理文档点击并通知其他 Controller ?

javascript - 如何查看大 JSON 对象是否包含值?

jquery在iframe窗口中触发自定义事件

jquery - 防止子级单击事件触发父级双击事件

javascript - 如何使用 bootstrap 网格系统和 React Js 显示多个元素

javascript - 我想在特定日期给出特定条件,但它无法正常工作

javascript - 可以对无点函数进行流注释吗?

javascript - 寻找 pubhubsubbub 协议(protocol)的开源 javascript 实现

javascript - 从不同组件切换事件/非事件类 Angular

javascript - 第 n 次点击后禁用 AJAX 按钮