Question

我是jQuery的新手，所以这个问题对你们来说似乎很幼稚。但请帮帮我。

我使用不同的标题动态创建了许多锚标签，并为动态过多的锚标签分配了不同的点击事件处理程序。

所有的锚标签都是用不同的标题完美创建的，但问题是它们的事件处理程序都与最后创建的锚标记的事件处理程序相同。因此，当我点击任何链接时，他们都会转到同一页面，这是您点击最后一个链接时的页面。

这是代码

var title;
var node;

for(var i = 0; i < nodes.length; i++){    
  node = nodes[i];
  title = node.getTitle();

  jQuery("#displayNodeDetails")
  .append(jQuery('<a></a>').attr({ href:'#' })
  .html(title).click(function(){
    EPCM.getSAPTop().LSAPI.AFPPlugin.service.navigate(node);
  }));
}

这里“displayNodeDetails”是分区。我不明白为什么当每次循环运行时“节点”的值都在变化时，我的所有链接都有相同的事件处理程序，我可以确认，因为我的代码创建了四个链接：“User Admin”，“System Admin” “，”内容管理“和”协作“，但所有链接都与”协作“位于同一页面。

Answer 1

这是因为node始终指向最后一个节点。

循环完成后调用click处理程序。因此，即使在其他锚点的处理函数中，node也将指向最后一个元素。

创建时需要将当前node的值传递给处理程序。

jQuery("#displayNodeDetails").append(jQuery('').attr({href:'#'}).html(title).click((function(node){
  return function() { EPCM.getSAPTop().LSAPI.AFPPlugin.service.navigate(node); };
})(node));}

这样，click处理程序获得一个函数调用函数传递给它的函数{。}}。

Answer 2

以下是我将代码重写为（希望）使其工作的方式：

// This is a quicker way of defining your loop.
for (node in nodes) {
  // Setting the variable inside the loop so it doesn't pollute the global
  // namespace unnecessarily.
  var title = node.getTitle();

  // Firstly build the link as a jQuery element
  var link = jQuery('<a>' + title + '</a>').attr('href', '#');
  // Then append it to the div
  jQuery('#displayNodeDetails').append(link);

  // Then set the click event callback on it inside a closure
  link.click((function(node) {
    return function() {
      EPCM.getSAPTop().LSAPI.AFPPlugin.service.navigate(node);
    };
  })(node));
}

如何在jQuery中处理动态创建的锚标记的click事件？

2 个答案: