Question

我有以下内容：

for(j=0; j<conn_nodes.length; j++) {
    var content_all_connections = "";
    var node_id = conn_nodes[j]['conn_node_id']);
    var a_id = "#" + node_id_slice;

    content_all_connections = "<a id=\""+node_id+"\">"+conn_nodes[j]['conn_node_label']+"<\/a>;             
    $('#all-connections-list').append(content_all_connections);

    /*$(a_id).on('click', function () {
        display_content(node_id);
    });*/
}   

$('.display').on('click', function () {
    display_content(node_id_slice);
});

我创建了几个锚标签宽度个人ID。当我现在尝试在for循环中设置click事件时（在/.../内）一切都很好 - 但node_id总是错误的。 display_content(node_id)仅在两个基于节点id的内容之间切换。不要问我为什么。

因此，我的计划是将click事件处理程序放在循环之外，并按类访问所有<a>标记。这是我的问题：我怎样才能访问我点击的锚点的ID？

有没有人有想法？

Answer 1

这条线永远不会起作用：

/*$(a_id).on('click', function () {
    display_content(node_id);
});*/

因为，当调用内部代码（即：display_content函数）时，全局变量node_id总是具有相同的值：conn_nodes.length。

为了避免这种情况，你可以使用IIFE：代表立即调用的函数表达式。通过这种方式，您可以将正确的值传递给事件处理程序，如下面的代码段所示（以这种方式，变量node_id成为IIFE函数的本地值）：

var conn_nodes = [{'conn_node_id': 1, 'conn_node_label': 1}, {'conn_node_id': 2, 'conn_node_label': 2}]

for (j = 0; j < conn_nodes.length; j++) {
  var content_all_connections = "";
  var node_id = conn_nodes[j]['conn_node_id'];
  var a_id = "#" + node_id;

  content_all_connections = "<a id=\"" + node_id + "\">" + conn_nodes[j]['conn_node_label'] + "<\/a>";
  $('#all-connections-list').append(content_all_connections);

  (function (node_id) {
    $(a_id).on('click', function () {
      alert(node_id);
    });
  })(node_id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="all-connections-list"></div>

但是，一个更简单的解决方案，如评论中描述的那样：

 var conn_nodes = [{'conn_node_id': 1, 'conn_node_label': 1}, {'conn_node_id': 2, 'conn_node_label': 2}];

for (j = 0; j < conn_nodes.length; j++) {
  var content_all_connections = "";
  var node_id = conn_nodes[j]['conn_node_id'];
  var a_id = "#" + node_id;

  content_all_connections = "<a id=\"" + node_id + "\">" + conn_nodes[j]['conn_node_label'] + "<\/a>";
  $('#all-connections-list').append(content_all_connections);

}

$('a').on('click', function () {
  alert(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="all-connections-list"></div>

jquery - 使用基于id的单独回调在每个锚标记上单击事件

1 个答案: