How to call unique function for dynamically created checkboxes in a div

问题

I am trying to dynamically create a set of check-boxes that each call a function differently when clicked

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 is just an array of strings. I really want to call the UpdateData function (which I have tested and works like it should) with the value or index of the button pressed, but nothing seems to be working.

This version just calls updateData ten times with index = 10. It obviously is not looking at the buttons as individual things. What am I doing wrong?

回答1:

When dynamically adding elements to the dom, attaching event listeners gets tricky. This is a perfect use case for delegate on a parent container:

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

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

回答2:

Use closures to get this behavior, the closure function will create a new isolated scope and store the state of the variables.

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

回答3:

The problem is that you are doing nothing in your click handler to reference the clicked element. To do that you need to specify selector as parameter to on(). That might look like this:

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

You should also place this code after your loop as you only need to execute this line of code once.

回答4:

Guessing by the code you are actually attaching a click event on a button rather than on the checkbox itself. Once you've created the element with document.createElement you can create your jQuery object and use the event handlers jQuery got.

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

If you want to keep the value of i you must use a closure. Look at my fiddle:

http://jsfiddle.net/u13Le70g/

来源：https://stackoverflow.com/questions/30941294/how-to-call-unique-function-for-dynamically-created-checkboxes-in-a-div

标签

javascript

jquery

checkbox