Javascript 使用单击功能创建新元素无效（铁路超高设置焦点）

如果我用jquery创建一个新元素，并添加一个如上所述的click函数，那么click函数肯定无法工作

我想把焦点放在eqivalent元素上，但它只关注最后一个元素

为了更好地解释，我做了一个jsfiddel

---

你有结案的问题：这比我更能解释：

检查我的修改

在将元素插入dom之前，for循环完成。由于这个事实，它将只在最后一个元素上添加处理程序。您需要匿名函数闭包来处理此问题

---

这里的问题是，您正在click处理程序中使用el变量，该变量在外部闭包中定义，当for循环完成时，它将更改为列表的最后一个变量。如果要将行为更改为正确，必须将循环编写为：

      for ( var i = 0; errorList[i]; i++ ) {
          var el = errorList[i];
          console.log("element: ",el.element);
          (function (el2) {
              $( "<li/>", {
                "class": "errorListLi",
                html: "<span>"+errorList[i].element.name+"</span><span>"+errorList[i].method+"</span>"+errorList[i].message,
                click: function() {
                    $(el2.element).focus();
                    console.log("go to: ",$(el2.element));
                }
              }).appendTo(newUL);
          })(el);
      }

这样，您将创建一个新变量el2，它不会在循环中改变，因为它被复制到即时调用的函数体中

var errorList = [];

var check =  function( element ) {    
    errorList.push({
                    message: "text-message",
                    element: element,
                    method: "text-method"
                });
}

$(document).find("input, select, textarea").each(function(i, item) {
                   var checked = check(item);
});
console.log(errorList);

              var newUL = $('<ul />',{
                            html: "Click on error-message (li) shout focus the equivalent element. But the focus is always set to the last element.<br><br>",
                            'class': 'errorListUl'
                          });

              for ( var i = 0; errorList[i]; i++ ) {
                  var _item = errorList[i];
                  (function (item) {
                  $( "<li/>", {
                    "class": "errorListLi",
                    html: "<span>"+item.element.name+"</span><span>"+item.method+"</span>"+item.message,
                    click: function() {
                        $(item.element).focus();
                    }
                  }).appendTo(newUL);

                  })(_item)
              }
              newUL.appendTo( $('#response') );

var newUL = $('<ul />',{
            html: "Click on error-message (li) shout focus the equivalent element. But the focus is always set to the last element.<br><br>",
            'class': 'errorListUl'
          });

for ( var i = 0; errorList[i]; i++ ) {
    (function(_i) {
        var el = errorList[_i],
            htmlText = "<span>" + el.element.name + "</span><span>" + el.method + "</span>" + el.message;

        console.log("element: ", el.element);

        $( "<li/>", {
            "class": "errorListLi",
            html: htmlText,
            click: function() {
                $(el.element).focus();  console.log("go to: ",$(el.element));
            }
    }).appendTo(newUL);
    })(i)
}

newUL.appendTo( $('#response') );

      for ( var i = 0; errorList[i]; i++ ) {
          var el = errorList[i];
          console.log("element: ",el.element);
          (function (el2) {
              $( "<li/>", {
                "class": "errorListLi",
                html: "<span>"+errorList[i].element.name+"</span><span>"+errorList[i].method+"</span>"+errorList[i].message,
                click: function() {
                    $(el2.element).focus();
                    console.log("go to: ",$(el2.element));
                }
              }).appendTo(newUL);
          })(el);
      }