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

Question

我正在尝试使用mousedown回调创建多个div。

但是回调函数不应该对所有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的消息＆＃34;按钮4点击！＆＃34;在控制台中生成。

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

Answer 1

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

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 2

最好为按钮使用一个类并为该项创建一个回调。

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 3

为您的元素提供一个类。然后使用该类中单击元素的索引来了解哪个是单击并对其进行操作：

＆＃13;

＆＃13;

    //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);
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>