jquery-binding events for dynamically added elements

Examples:

$ ("#modify_nick"). Click (function () {
$ (this). CSS ("display", "none");
$ ("#nickname_span"). empty ();
var input = document.createelement ("input");
$ (input). attr ("type", "text");
$ (input). attr ("id", "user_nick_id");
$ (input). attr ("name", "User_nick");
$ (input). attr ("MaxLength", "20");
$ (input). attr ("value", "<?php Echo $userinfo->nickname?>");
$ (input). AppendTo ("#nickname_span");
$ (input). Focusend ();
});

$ ("#nickname_span"). On ("Blur", "Input[name= ' User_nick ']", function () {
var startval = "<?php echo $userinfo->nickname?>";
var Endval = $ (this). Val ();
$ ("#modify_nick"). CSS ("Display", "block");
if (endval! = startval) {
if (Endval! = "") {
$.ajax ({
Type: "GET",
URL: "<?php echo Yii::app ()->createurl (' User/modifyuserinfo ')?>",
Data: {User_nick:endval},
DataType: "JSON",
Success:function (msg) {
if (msg = = 666) {
Window.location.href = "<?php echo yii::app ()->createurl (' User/usermanager ')?>";
}
}
});
}
}
});

Description

When binding an event to an element using jquery, I often use bind or click, but this only binds the event to the element that the page has loaded. When you need to request remote data in an AJAX way to dynamically add page elements, it is obvious that the above types of binding events are not valid in the way they are written.

$ (selector). bind (Event,data,function)

$ (selector). Click (function)

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult ul li"). Bind ("click",function () {
2. $ (this). css ("border","5px solid #000");
3. });
4. $ ("#searchMoveVideoResult ul li"). Click (function () {
5. $ (this). css ("border","5px solid #000");
6. });

There are several ways to bind events for dynamically added elements:

1.delegate (): Attaches one or more event handlers to the current or future child elements of the matching element

$ (selector). Delegate (Childselector,event,data,function)

Most jquery versions are available today, but I don't normally use them.

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult"). Delegate ("ul Li","click",function () {
2. $ (this). css ("border","5px solid #000");
3. });

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult"). Delegate ("Click","ul li",function () {
2. $ (this). css ("border","5px solid #000");
3. });

See the difference, the second is wrong, remember to write the event behind the element.

2.live (): Add one or more event handlers for current or future matching elements

$ (selector). Live (Event,data,function)

This method was previously recommended for jquery1.8 versions, and is deprecated after the jquery1.8 version, which I tried and was not valid, so the high version of JQuery recommends using the on () method to bind events.

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult ul Li"). Live ("click",function () {
2. $ (this). css ("border","5px solid #000");
3. });

3.on (): For current and future elements (e.g. new elements created by script)

$ (selector). On (Event,childselector,data,function,map)

Under test, most versions of jquery support this method, and I prefer to use it.

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult"). On ("click","ul li",function () {
2. $ (this). css ("border","5px solid #000");
3. });

[JavaScript]View PlainCopy

1. The following is wrong to write, be sure to put the dynamically added elements in the on () method. </span>

[JavaScript]View PlainCopy

1. $ ("#searchMoveVideoResult ul Li"). On ("click",function () {
2. $ (this). css ("border","5px solid #000");
3. });

4.onclick event: When adding data dynamically, the OnClick event is bound to the element

[JavaScript]View PlainCopy

2. function Searchmovevideo () {
4. $.ajax ({
6. Type:"POST",
8. URL:"Http://op.juhe.cn/onebox/movie/video",
10. data:{"Q": $ ("#moveVideo"). Val (),"key":"346f79df993776748b242236464d565d"},
12. DataType:"JSONP",
14. Success:function (data) {
16. Console.log (data);
18. if (data.error_code=="0") {
20. var Result=data.result;
22. Console.log (result);
24.                 var html=result.title+ "<br>" +result.tag+" <br> "+result.year+" <br> "                                             +result.area+ "<br>" +result.dir+
26. html+="<br><img src= '" +result.cover+"'/><br> ';
28. html+=' <ul style= "list-style:none; float:left;"  > ';
30. var act_s=result.act_s;
32. For (var i=0;i<act_s.length;i++) {
34. html+=' <li style= "float:left;" <span style= "color: #cc0000;" >onclick= "Showsource (this);" </span>><a target= "_bla nk" > ' ><br> ' +act_s[i].name+ ' </a></li> ';
36. }
38. html+=' </ul> '
40. $ ("#searchMoveVideoResult"). HTML (HTML);
42. }else{
44. $ ("#searchMoveVideoResult"). HTML (Data.reason);
46. }
48. }
50. }); }

jquery-binding events for dynamically added elements