Question

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body> 
<script>
    for(var c=1; c<=5; c++){
        var btn = $("<button>Button "+c+"</button>");
        btn.click(new function(){
            alert("You click button "+c);
        });
        $("body").append(btn);
   }
   </script>
</body>
</html>

有人可以向我解释为什么每次加载页面时都会执行click函数吗？我希望按钮在点击时显示一个警告框，但不幸的是没有任何反应！有什么想法吗？

Answer 1

从按钮单击处理程序中删除new。此外，您需要更新代码以获得单击按钮的正确索引，如下所示。使用将代码包装在闭包中的for内。

for (var c = 1; c <= 5; c++) {
    var btn = $("<button>Button " + c + "</button>");
    (function (c) {
        btn.click(function () {
            alert("You click button " + c);
        });
    }(c));
    $("body").append(btn);
}

修改

更好的方法是使用event delegation和data-*属性将信息存储在HTML元素中。

for (var c = 1; c <= 5; c++) { var btn = $("<button class='myButton' data-title=" + c + ">Button " + c + "</button>"); $("body").append(btn); } $(document.body).on('click', '.myButton', function() { document.write('You clicked ' + $(this).data('title') + ' button'); });

Answer 2

删除功能前的new。以这种方式创建函数会调用它，因为它将它作为构造函数。

for(var c=1; c<=5; c++){
        var btn = $("<button>Button "+c+"</button>");
        btn.click(function(){
            alert("You click button "+c);
        });
        $("body").append(btn);
   }

正如你在这里看到的那样：

var myFuncValue = new function() {};

返回：

{}

虽然

var myFuncValue = function() {}

返回

[Function]

想象一下，你给JQuery myFuncValue，它会尝试调用第一个值，在你的情况下是一个空对象。

Answer 3

只需将您的代码更改为：

for(var c=1; c<=5; c++){
    var btn = $("<button>Button "+c+"</button>");
    btn.on('click', function(){
        alert("You click button "+c);
    });
    $("body").append(btn);
}

您的事件分配错误。 Check jsFiddle

每次加载文档时都会执行click函数

3 个答案: