Detailed explanation of JQuery binding events in loop

There is a page that requires N DOMs, and the element IDs in each DOM must end with numbers, for example

<input type="text" name="username"  value="" />
<input type="text" name="username"  value="" />
<input type="text" name="username"  value="" />

Now there is a loop. When loading the page, you need to add an onclick event to each element. The easy way to write it is

$(function(){
 for(var i=1; i<=3; i++){
  $('#username_'+i).onclick(function(){
   alert(i);
  });
 }
});

It is wrong to write this. . .

See this article for reasons of errors and similar error analysis"In-depth understanding of JQuery loop binding events"

Then change it to the following

$(function(){
 for (var i=1; i<=3; i++){
  $("#username_"+i).bind("click", {index: i}, clickHandler);
 }

 function clickHandler(event) {
  var i= ;
  alert(i);
 }
});

The above detailed explanation of the above problem of binding events in JQuery in loop is all the content I share with you. I hope you can give you a reference and I hope you can support me more.