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

Question

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

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

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

    //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

给你的元素一个class。然后使用该 class 中被点击元素的索引来了解点击了哪个元素并对其采取行动：

    //some number
    var num=4;

    for(var z = 0 ; z < num ;z++)
    {
       $('#divHolder').append('<div class="mydivs"></div>');
    }




$('body').on('mousedown', '.mydivs', function() {
  
  // get the index of the clicked div
  var curDiv = $('.mydivs').index(this);
  
  // call a function and pass it this index
  doStuff(curDiv);
});


function doStuff(clickedDiv){
  // the index that was passed in will tell you what
  // div was clicked do something with that
  $('#show').html( 'you clickded div:' + clickedDiv);
};

.mydivs{
  background-color:#cccccc;
  margin-top:15px;
  height:100px;
  width:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<div id="divHolder"></div>

Answer 2

跟踪您的按钮，尝试将您的代码修改为：

var num = 4;
var btn;

for (var z = 0; z < num; z++) {
  btn = $("<div>", {
    id: z,
    text: z
  }).appendTo("#empty");

  btn.on('click', function() {
    alert("Button " + $(this).text() + " clicked !");
  });
}

#empty div {
  padding: 5px;
  border: 1px solid grey;
  margin-bottom: 2px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='empty'></div>

使用单击处理程序：

$(function() {
  var num = 4;
  var btn;
  var empty = $("#empty");

  empty.on('click', 'div.btn', function() {
    alert("Button " + $(this).text() + " clicked !");
  });

  for (var z = 0; z < num; z++) {
    btn = $("<div>", {
      'id': z,
      'text': z,
      'class': 'btn'
    });
    empty.append(btn);
  }
});

div.btn {
  padding: 5px;
  border: 1px solid grey;
  margin-bottom: 2px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='empty'></div>

Answer 3

最好为按钮使用 class 并为项目创建回调。

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 !");
});

Answer 4

解决此问题的一种方法是在 for 循环之外处理事件。

工作代码片段：

//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 taken out of the for loop and added event delegation since it is a dynamically added element
$(document).on('click', 'div div', function(){
  console.log("Button "+ $(this).attr('id') +" clicked !");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="empty"></div>

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

How to create different mousedown callbacks dynamically?

javascript

jquery

html

css

mousedown