Question

如果我使用jquery创建一个新元素并添加如上所示的单击函数，则单击函数无法正常工作。

我想把重点放在等效元素上，但它只关注最后一个元素。

为了更好地解释我制作了一个jsfiddel here

          var newUL = $('<ul />',{
                        text: "ul text",
                        'class': 'errorListUl'
                      });

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

Answer 1

你有一个关闭的问题：这个link会比我更好地解释：）

在your fiddle

上查看我的修改

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

Answer 2

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

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

Answer 3

这里的问题是你在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，它不会改变循环，因为它被复制到即时调用函数体。

使用单击功能创建新元素不起作用（无法设置焦点）

3 个答案: