CODEWITHSUNDEEP
jqueryloopseventsclickhandler
Peter
Peter

Reputation: 19

jquery - click event on every anchor tag with individual id-based callback

I have the following:

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

I create a couple of anchor tags width individual IDs. When I now try to set a click event within the for loop (within /.../) everything is fine - but the node_id is always wrong. display_content(node_id) is only switching between two node-id-based contents. Don't ask me why.

Therefore, my plan is to put the click event handler out of the loop and access all <a> tags by class. Here is my question: How can I also access the ID of the anchor I was clicking on?

Does anyone have an idea?

Upvotes: 0

Views: 489

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

This piece of lines will never works:

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

Because, when the code inside (i.e.: display_content function) will be called the global variable node_id has always the same value: conn_nodes.length.

In order to avoid this you may use the IIFE: that stands for immediately invoked function expression. In this way you could pass the correct value to the event handler like in the following snippet (in this way the variable node_id becomes local to the IIFE function):

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>

But, a simpler solution, like described in the comment is:

 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>

Upvotes: 1

Related Questions