Question

我正在尝试动态创建一组复选框，每个复选框在单击时都会以不同方式调用

function initAllButtons(variable, length)
{
   for(c = 0; c < length; c++)
   {
      clicks.push(true);
   }


   for(i = 0; i < length; ++i)
   {
      var label = document.createElement("label");
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.checked = true;
      checkbox.value = btns[i];
      checkbox.class = "colorCoder";
      label.appendChild(checkbox);

      document.getElementById('Buttons').appendChild(checkbox);

      $('#Buttons').on('click', function(){updateData(i,clicks);});
   }
}

Btns只是一个字符串数组。我真的想调用UpdateData函数（我已经测试过并且按照它应该的方式工作），按下按钮的值或索引，但似乎没有任何工作。

这个版本只用index = 10调用updateData十次。很明显，它并没有将按钮视为单独的东西。我做错了什么？

Answer 1

在向dom动态添加元素时，附加事件侦听器变得棘手。这是父容器上委托的完美用例：

        var clickcontainer = document.getElementById('clickcontainer');

        clickcontainer.addEventListener('click', function(e) {
            var target = e.target || e.srcElement;
            e.stopPropagation();
        }, false);

Answer 2

使用闭包来获得这种行为，闭包函数将创建一个新的隔离范围并存储变量的状态。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

function clickClosure(i, clicks){
        return function(){
            updateData(i,clicks);
        }
    }

    function initAllButtons(variable, length)
    {
       for(c = 0; c < length; c++)
       {
          clicks.push(true);
       }


       for(i = 0; i < length; ++i)
       {
          var label = document.createElement("label");
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.checked = true;
          checkbox.value = btns[i];
          checkbox.class = "colorCoder";
          label.appendChild(checkbox);

          document.getElementById('Buttons').appendChild(checkbox);

          var clickFnct = clickClosure(i, clicks);

          $('#Buttons').on('click', clickFnct);
       }
    }

Answer 3

问题是你在点击处理程序中什么都不做，无法引用点击的元素。为此，您需要将selector指定为on()的参数。这可能是这样的：

$('#Buttons').on('click', ':checkbox', function() {
    // determine index of clicked item
    var index = $('#Buttons :checkbox').index(this);
    // call your function
    updateData(index,clicks);
}

您还应该在循环之后放置此代码，因为您只需要执行一行代码。

Answer 4

通过代码猜测您实际上是在按钮上附加了点击事件而不是复选框本身。一旦用document.createElement创建了元素，就可以创建jQuery对象并使用jQuery得到的事件处理程序。

var checkbox = document.createElement("input");
$(checkbox).on('click' function(){
    //Code here
}

如果你想保留i的值，你必须使用一个闭包。看看我的小提琴：

http://jsfiddle.net/u13Le70g/

如何在div中为动态创建的复选框调用唯一函数

4 个答案: