javascript - 如何动态创建不同的 mousedown 回调？

Question

我正在尝试创建多个 div，每个 div 都有一个 mousedown 回调。

但是回调函数不应该对所有的 div 都是通用的，它的功能应该根据点击的 div 而不同。

这是我使用的生成 div 和设置回调的代码。

    //some number
    var num=4;

    for(var z = 0 ; z < num ;z++)
    {
        //create a div with id 'z'
        $("<div/>",{id:z}).appendTo("#empty");

        //displaying the id on the screen 
        $("#"+z).text(z);   

        console.log("button "+z+" created");

        //Callback function , which is not working as I want it to. See the bottom section for more details
        $("#"+z).mousedown(function(){
            console.log("Button "+z+" clicked !");
        });
    }

上面的代码运行如下...

在点击任何一个 div 时，消息“Button 4 clicked!”在控制台生成。

为了实现我的目标应该做什么？

Answer 1

最好为按钮使用类并为元素创建回调。

var num=4;

for(var z = 0 ; z < num ;z++)
{
    //create a div with id 'z'
    $("<div/>",{id:z,class:'btn'}).appendTo("#empty");

    //displaying the id on the screen 
    $("#"+z).text(z);   

    console.log("button "+z+" created");
}

$(".btn").mousedown(function(){
    var z = $(this).attr('id');
    console.log("Button "+z+" clicked !");
});