JQuery on () method binds a dynamic element's Click event

Has been plagued by this problem before, after the jQuery1.7 version of the Add on method, previously learned, its superiority than live (), bind (), delegate () and other methods, before this project to use this to test the results found, Incredibly dynamically generated tags clicked did not respond, and live method can support, and so everywhere search information, ask netizens, results for a long time in an article finally found the answer ...

When JQuery uses on to bind dynamically generated elements, it cannot manipulate the object directly, but instead chooses its non-dynamically generated parent node and then finds itself to achieve the effect. Everybody look at the source code to know. The generated button cardinality entry on method is valid by clicking the invalid Live method. UI front-end frame latest masterpiece! Prize Probation!

For example, there are two elements below the page:

. Code

2. <input type= "button" Name= "addbtn" value= "button Add"/>
4. <div id= "Test" ></div>

Using the jquery code below you can compare the differences:

. Code

2. $ (function () {
4. var a = 1,
6. $_div = $ (' #test ');
8. $ (' input[name=addbtn] '). On (' click ', function () {
10. $_div.append (' <input type= ' button "name=" Test ' + A + ' "value=" buttons ' + A + ' "/> ');
12. a++;
14. });
18. Even item click events
20. $_div.on (' Click ', ' Input[name^=test]:even ', function () {
22. Alert (' I am a valid on method, can you see me: ' + this.value);
24. });
28. An odd-bound Click event finds the click is invalid, but instead uses the live method to support
30. $ (' input[name^=test]:odd '). On (' click ', function () {
32. Alert (' I am invalid on method, you cannot see me ');
34. });
38. An odd-bound Click event finds the click is invalid, but instead uses the live method to support
40. $ (' input[name^=test]:odd '). Live (' click ', function () {
42. Alert (' I am the live method, can you see me: ' + this.value);
44. });
46. });

The code is simple, do not put the demo page, if there is nothing to understand, you can leave a message. UI front-end frame latest masterpiece! Prize Probation!

JQuery on () method binds a dynamic element's Click event