Details about how JQuery binds events in a loop, and details about jquery

Details about how JQuery binds events in a loop, and details about jquery

There is a page that requires n dom, and each element ID in the DOM must end with a number, for example

<Input type = "text" name = "username" id = "username_1" value = ""/> <input type = "text" name = "username" id = "username_2" value = ""/> <input type = "text" name = "username" id = "username_3" value = ""/>

Now there is a loop. When loading a page, you need to add an onclick event for each element. It is easy to think of the syntax:

$ (Function () {for (var I = 1; I <= 3; I ++) {$ ('# username _' + I ). onclick (function () {alert (I );});}});

This writing is wrong...

For details about the cause of the error and analysis of similar errors, see this article.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 = event. data. index; alert (I );}});

The above details about JQuery binding events in the loop are all the content shared by the editor. I hope to give you a reference, and I hope you can provide more support for the customer's house.