Use on to bind hover events to dynamically added elements, with no effective resolution

1. Requirements: Often to dynamically load the DOM node, after loading the node of course there will be some binding event requirements, today to an event binding hover, with jquery, unexpectedly did not take effect. Code not in effect on first

$ (' ul.course_lists '). On (' hover ', ' li ',function() {       //},function () {      //  mouseleave dosomething});

2. Where is the problem?

• Does the on function pass the wrong argument? Search Documents Bai, I do not look at him, he is there, I look at him, may help me solve the problem, I do not look at him, still confused
• Look at the grammar first

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

• It's obvious that in the arguments passed to the inside, only one function can be transmitted, and I pass two functions.

3. Analysis

In jquery, the hover () function itself is the encapsulation of MouseEnter && mouseleave , but in the native event, there is no hover this event, So there is no effect when passing the parameter hover.

If I want to bind a hover-like effect, I can bind two events MouseEnter && MouseLeave + a function, the style is toggle with the class name, or in map, an event corresponds to a function

4. The code comes in.

• 　　Binding two events

Js
$ (' ul.course_lists '). On (' MouseEnter mouseleave ', ' li ',function() {       $ (this). Toogleclass (' Border_color ');}); // CSS . border_color{    Border-color: #ccc;    } li{  border:1px solid #fff;}

• Map

$ (' ul.course_lists li '). On ({    mouseenter:function() {        $ (this). CSS (' Border-color ', ' #ccc ');    },    MouseLeave:function() {        $ (this). CSS (' Border-color ', ' #fff ');        }});

5. Fix it, But,on () method don't make any mistakes!　

　

Use on to bind hover events to dynamically added elements, with no effective resolution