Javascript - 在循环中动态分配 onclick 事件

Question

我有非常简单的 html 页面和 js 代码：

<html>
    <head>
        <title></title>
    </head>
    <body>

        <div id="divButtons">

        </div>

        <script type="text/javascript">
            var arrOptions = new Array();

            for (var i = 0; i < 10; i++) {
                arrOptions[i] = "option" + i;
            }

            for (var i = 0; i < arrOptions.length; i++) {
                var btnShow = document.createElement("input");
                btnShow.setAttribute("type", "button");
                btnShow.value = "Show Me Option";
                var optionPar = arrOptions[i];
                btnShow.onclick = function() {
                    showParam(optionPar);
                }

                document.getElementById('divButtons').appendChild(btnShow);
            }

            function showParam(value) {
                alert(value);
            }        
        </script>
    </body>
</html>

该页面绑定了 10 个按钮，但是当您单击任何按钮时，它总是显示警报“option9”。 怎么可能分配 onclick 事件来显示通讯选项？

谢谢！

Answer 1

您将必须执行以下操作：

btnShow.onclick = (function(opt) {
    return function() {
       showParam(opt);
    };
})(arrOptions[i]);

Answer 2

考虑以下事实，当执行onclick（）函数时，它具有的所有功能是：

showParam(optionPar);

，逐字记录。 在执行click事件时，optionPar将被解析，此时，它很可能是您为其分配的最新值。 您通常应该避免以这种方式传递变量。

重写以下代码可以最好地解决您要解决的问题：

            btnShow.value = "Show Me Option";
            var optionPar = arrOptions[i];
            btnShow.optionPar = optionPar;
            btnShow.onclick = function(e) {
                // if I'm not mistaking on how to reference the source of the event.
                // and if it would work in all the browsers. But that's the idea.
                showParam(e.source.optionPar);
            }

Answer 3

我附加一个事件处理程序：

        window.onload = function() {
            var folderElement;
            tagFolders = document.getElementById("folders");
            for (i = 0; i < folders.length; i++) {
                folderElement = folderButtons[i];
                folderElement = document.createElement("button");
                folderElement.setAttribute("id", folders[i]);
                folderElement.setAttribute("type", "button");
                folderElement.innerHTML = folders[i];
                if (typeof window.addEventListener !== "undefined") {
                    folderElement.addEventListener("click", getFolderElement, false);
                } else {
                    folderElement.attachEvent("onclick", getFolderElement);
                }
                tagFolders.appendChild(folderElement);
            }

可以从触发事件的元素中检索任何内容：

// This function is the event handler for the folder buttons.
function getFolderElement(event) {
    var eventElement = event.currentTarget;
    updateFolderContent(eventElement.id);
}

在这种情况下，您必须将选项嵌入元素/标签中。 就我而言，我使用ID。

Answer 4

对于jquery，请从API中检查添加事件数据部分：

...
for (var i = 0; i < arrOptions.length; i++) {

    $('<input id="btn" type="button" value="Show Me Option"><input>').appendTo("#divButtons")

    $('#btn').bind("click", {
        iCount: i},
    function(event) {
        showParam(arrOptions[iCount]);
    });
}

Answer 5

公认的答案似乎可行，但似乎令人困惑，并且执行起来有些麻烦。 更好的方法可能是对要为其分配事件侦听器的元素使用data属性。 它简单，易于理解，并且代码更少。 这是一个例子：

btnShow.data = arrOptions[i];

btnShow.onclick = function() {
  showParam(this.data);
}

Answer 6

公认的答案是正确的，但我认为没有做任何真正的解释。

让我尝试解释一下，这里的问题是经典的缺少闭包。

变量“ i”在每次循环迭代中都会增加1，并且实际上并未执行on-click事件 ，无论是否仅将其应用于a元素，它都会汇总到arrOptions的长度为10。

因此，循环继续进行，直到'i'为10，然后，每当触发单击事件时，它都将取值为10的i。

现在，对于解决方案，在解决方案中，我们使用了闭包，因此，当我们将'i'的值应用于a元素的点击事件时，实际上它会及时获得i的确切值。

onclick事件的内部函数创建一个闭包，它在其中引用参数（arrOptions [i]），这意味着在正确的时间实际的i变量是什么。

该函数最终会安全关闭该值，然后在执行on-click事件时可以返回其相应的值。

Answer 7

您仅将变量的引用传递给函数，而不是其值。 因此，每次循环循环时，都会为匿名函数分配一个引用，并且它们都指向内存中的相同值。 但是，由于在循环中使用相同的变量名，因此将覆盖变量的值。 您可以将变量连接为字符串以保留其值。 例如这样的：

btnShow.onclick = new Function("", "showParam(" + arrOptions[i] + ");");

第一个参数是函数的名称，但是afaik它是可选的（可以保留为空白或完全省略）。

Answer 8

  pp();

  function pp()
  {

    for(j=0;j<=11;j++)
    {

      if(j%4==0)
      {
        html+= "<br>";
      }
      html += "<span class='remote' onclick='setLift(this)' >"+ j+"</span>";
    }
    document.getElementById('el').innerHTML = html;
  }

  function setLift(x)
  {
    alert(x.innerHTML);
  }