JQuery implements an instance analysis of element binding events added to dynamically

The instance of this paper tells the jQuery implementation as a dynamically added element binding event. Share to everyone for your reference, as follows:

When using jQuery to bind events, I often use bind or click, but this can only be loaded with a good element binding event. When requesting remote data in a way to use AJAX to dynamically add a page element, it is clear that the above binding event is invalid, and the specific way is as follows.

$ (Selector) .bind (Event, DATA, FUNCTION)
   
$ (selector)
   
$ (“# searchMovevideResult UL Li). Bind (” click ” Function () {$ (this) .CSS (“Border”, “5px solid # 000”);}); $ (“# searchmovevideoresult UL Li). click (Function () {$ (this) .css ( “Border”, “5PX Solid # 000”);});
There are several ways to dynamically add element binding events:
  1. Delegate () : Additional one or more event processors 

  $ (Selector) are added to the current or future sub-elements of the matching element. Delegate (ChildSelector, Event, Data, Function)  
Currently most jQuery versionThis is available, but I don’t need it.

$ (“# searchmovevideResult”). Delegate (“UL Li”, “Click”, Function () {$ (this) .css (“Border”, ” 5px solid # 000 “);}); $ (” # searchmovevideoresult “). DELEGATE (” Click “,” UL Li “, Function () {$ (this) .css (” Border “,” 5px solid # 000 ” );});
What is the difference between them? The second way is wrong, remember to write the event behind the elements.
 2.  LIVE () : Add one or more event processors to current or future matching elements 

$ ( Selector) .Live (Event, DATA, FUNCTION)

JQuery1.8 version Previously recommended to use this method; JQuery1.8 is not recommended, I tried it. Under, it is also invalid, so the high version of jQuery is recommended to use the ON ()

method to bind events.
 $ ("# searchmovevideoresult UL Li). Live (" Click ", Function () {$ (this) .css (" Border "," 5px Solid # 000 ");});   3. 
ON () : Suitable for current and future elements (such as new elements created by scripts)

$ (Selector) .on (Event, ChildSelector, Data, Function, Map)

Tests, most versions of jQuery are supported by this method, It is also a way I prefer to use.
   $ ("# searchMovevideResult"). On ("Click", "UL Li", function () {$ (this) .css ("border", " 5px solid # 000 ");}); // The following is wrong, so be sure to put the dynamically added elements in the on () method. $ ("# searchmovevideoresult UL Li). On (" Click ", Function () {$ (this) .css (" Border "," 5px solid # 000 ");}); 

OnClick Event: When dynamically adding data, it is bound to element onclick

event
   Function searchMovevideo () {$ .ajax ({type: "post", URL: "http://op.juhe.cn/onebox/movie/video", Data: {"Q": $ ("# movevideo" ) .val (), "key": "346f79df993776748b242236464d565d"}, datatype: "jsonp", success: function (data) {console.log (data); if (data.error_code =="0") {var result = data.result; console.log (result); var html = result.title + "
” + result.tag + “” + result.act + “
” + Result .year + “+ Result.area +”

“+ Result.dir +”

“+ Result.Desc; HTML + =”
 "; HTML + = ' '; var act_s = result.act_s; for (var i = 0; i  onclick = "showSource (this);" 
>

‘ + ACT_S [I] .Name + ‘ ‘ $ (“# searchmovevideResult”). HTML (HTML);} else {$ (“# searchmovevideResult”). HTML (Data.reason);}} });}

More about jQuery related content, readers, interested, can view this station: “jQuery common event usage and skill summary”, “jQuery common plugin and Usage summary, “jQuery operation JSON data skills”, “jQuery extension skill summary”, “jQuery common classic special effect summary” and “jQuery selector usage summary”
 I hope this article will design to everyone's jQuery program design Help.  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment