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

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” 是分裂。我不明白为什么当每次循环运行时“节点”的值发生变化时，为什么我的所有链接都有相同的事件处理程序，我可以确认是因为我的代码创建了四个链接：“用户管理”，“系统管理员“，”内容管理“和”协作“，但所有链接都与”协作“一致。

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处理程序获取具有正确node通过函数调用传递给它的功能。

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