Immediately Invoked Function Expression (IIFE)

Create a IIFE closure using the Module Pattern to invoke which clickable link was clicked

by Thomas Orthbandt

HTML

<h2>How to make the alerts show the correct number when clicked?</h2>
<p><b>Scenario</b>: This code only shows the total number of anchor tags, we want to know which link was actually clicked.<br><br>
var anchors = $('a');<br>
for (i = 0; i < anchors.length; i++) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;$(anchors[i]).on('click', function() {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(i);<br>
&nbsp;&nbsp;&nbsp;&nbsp;})<br>
};<br>
</p>

<p><b>Solution:</b><br>
Create <b>Functional Expression</b> by wrapping <br>
<b><em>(function(i) {</em></b><br>
&nbsp;&nbsp;&nbsp;&nbsp;$(anchors[i]).on('click', function() {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(i);<br>
&nbsp;&nbsp;&nbsp;&nbsp;})<br>
<b><em>})(i);</em></b><br>
</p>

<a href="javascript:void(0);">link1</a>
<a href="javascript:void(0);">link2</a>
<a href="javascript:void(0);">link3</a>
<a href="javascript:void(0);">link4</a>
<a href="javascript:void(0);">link5</a>
<a href="javascript:void(0);">link6</a>

CSS

a {
  display: inline-block;
}

JavaScript

var anchors = $('a');

for (i = 0; i < anchors.length; i++) {
	(function(i) {
		$(anchors[i]).on('click', function() {
    		alert(i);
		})
	})(i)
}