JQuery - нажмите событие на каждой анкерной тег с индивидуальным обратным вызовом ид на основе

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

создать пару тегов привязки шириной отдельных идентификаторов. Когда я сейчас пытаюсь установить событие click в цикле for (внутри/... /) все в порядке, но node_id всегда ошибочно. display_content(node_id) только переключается между двумя содержимым на основе узла. Не спрашивай меня, почему.

Поэтому мой план состоит в том, чтобы вывести обработчик события клика из цикла и получить доступ ко всем <a> тегам по классам. Вот мой вопрос: как я могу получить доступ к идентификатору якоря, на который я нажимал?

У кого-нибудь есть идеи?

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>