jQuery: converting .live to .on/.off

Question

Possible Duplicate:
jQuery 1.7 - Turning live() into on()

I have this code:

<script>
        jQuery('#ultimecomunicazioni')
    .live("mouseenter", function() {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
    })
    .live("mouseleave", function() {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    });
</script>

I'd like to change the two .live to .on and combine the 2 handlers in one. I tried to use this example by TJ but I get confused from the 'tr' at the end.. it should be something like this but I'm not sure:

<script>
jQuery('#ultimecomunicazioni').on({
    'mouseenter' : function () {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
     },
    'mouseleave' : function () {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    }
});
</script>

use `appendTo` it's safer (works the other way round) & `find` instead of `children` (it's faster). you can delegate your events from body or a main container, it's also faster & eats up very less memory + it'll then work on dynamically appended element as well — mikakun, Feb 03 '13 at 13:46
@JanDvorak, not faster, safer (reread & i did not edit!) - i've had lots of trouble with ie using append few years back so turned my back on it — mikakun, Feb 03 '13 at 13:56
@FelixKling: Yeah, that's the duplicate for the question, but his actual issue is more like [Why does jQuery or a DOM method such as `getElementById` not find the element?](http://stackoverflow.com/q/14028959/1048572) — Bergi, Feb 03 '13 at 13:57

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

Just read the docs for .live and the part on delegated events for .on, it's explained there pretty good.

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

However, I can't see why you ever would need delegated functionality on one element with a certain id. It seems likely that you just experience this issue.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 03 '13 at 13:42

Bergi

513,640
108
821
1,164

Can you quote the relevant part in case the link rots? – John Dvorak Feb 03 '13 at 13:44
1

@Jan: Yeah, since it's an answer I probably should do that. Originally it was intended as a RTFM-comment… – Bergi Feb 03 '13 at 13:55
I'm reading the docs and trying to make it working with $(document).on(); – MultiformeIngegno Feb 03 '13 at 14:08
@Bergi This should be ok, right..? :) http://jsfiddle.net/5xS6W/1/ – MultiformeIngegno Feb 03 '13 at 15:09
No, not really. Read http://stackoverflow.com/q/14028959/1048572 and have a look at http://jsfiddle.net/5xS6W/2/ – Bergi Feb 03 '13 at 16:23

score 1 · Accepted Answer · answered Feb 03 '13 at 15:01

1

Try this:

$(document).on("mouseenter mouseleave", "#ultimecomunicazioni" , function(e) {
    if(e.type === 'mouseenter'){
        $(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="comunicazioni/">tutte</a>)</span>');
    } else {
        $('#ultimecomunicazioni_appear').remove();
    }
});

Note: I have removed the little php echo code since that does not work with javascript (server vs client side languages)

answered Feb 03 '13 at 15:01

Gustavo Hoirisch

1,580
10
18

Thanks! Works! :) Is this better than http://jsfiddle.net/5xS6W/1/ ? – MultiformeIngegno Feb 03 '13 at 15:11
Depends on your needs. They are essentially the same thing. – Gustavo Hoirisch Feb 03 '13 at 15:16

score 0 · Answer 3 · answered Feb 03 '13 at 13:45

0

You Can try this :

<script>
jQuery('#ultimecomunicazioni').parent().on({
    'mouseenter' : function () {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
     },
    'mouseleave' : function () {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    }
},
'#ultimecomunicazioni'
);
</script>

answered Feb 03 '13 at 13:45

Ahmed Assaf

571
5
23

Delegating to itself? What for? – John Dvorak Feb 03 '13 at 13:46
Is that all you've changed is that you've added the second parameter, attempting delegation to itself? – John Dvorak Feb 03 '13 at 13:47
look again , I forget .parent – Ahmed Assaf Feb 03 '13 at 13:49
I still see no reason this should work any better than the original except in rare cases (which do exist). – John Dvorak Feb 03 '13 at 13:50
You mean my code doesn't work. – Ahmed Assaf Feb 03 '13 at 13:56
Unless the asker removes and readds the element with said ID or there are two elements with the same ID (former of which gets removed), your code doesn't help anything. – John Dvorak Feb 03 '13 at 13:59
I'll still keep it unvoted in the rare case it helps somebody who removes and readds some element. Delegating to `document` would still probably be better. – John Dvorak Feb 03 '13 at 14:03

score 0 · Answer 4 · answered Feb 03 '13 at 13:47

You're forgetting about the fact, that jQuerys original .live() method was in that way special, that it always bound the event listener to the document.body. That was big critique point also, because most of the time it was unnecessary to place the handler so far away at the top of the document.

.delegate() was more like .on() in its current form, but they changed the order of arguments from

method(<element>, <event>, <callback>)

into

method(<event>, <element>, >callback>)

I'm uncertain if that affects your original code, but if it requires for some reason that the event handler is on document.body level instead the one you called .on() for, it might cause some trouble.

Uhm.. my just made an element appear when I passed the mouse on another element. you can see it live here http://goo.gl/8Nxnu (search for "Ultime circolari", when you hover it an element appears at its right). — MultiformeIngegno, Feb 03 '13 at 13:50

score 0 · Answer 5 · answered Feb 03 '13 at 13:58

0

As i saw your code this seems that you are having issues with the php part in the appending content:

jQuery('#ultimecomunicazioni').on({
'mouseover': function () {
    jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" 
href="<?php echo esc_url( home_url( / ) ); ?>comunicazioni/">tutte</a>)</span>');
},    //---------------------------^-^-----------------------here
    'mouseleave': function () {
    jQuery(this).children('#ultimecomunicazioni_appear').remove();
}
});

i just removed the quotes here and your code worked : http://jsfiddle.net/CrXZr/

answered Feb 03 '13 at 13:58

Jai

71,335
12
70
93

Uhm.. really weird! Anyway in the fiddle everytime I pass the mouse on the "(tutte)" another element appears – MultiformeIngegno Feb 03 '13 at 14:02
yes because div is not fixed with width and height and you can use `event.stopPropagation()` on span's mouse over. – Jai Feb 03 '13 at 14:24

mikakun · Answer 6 · 2013-02-03T14:15:58.887

0

$(document.body).on({
    'mouseenter' : function () {
        $('<span id="ultimecomunicazioni_appear"/>').appendTo($(this));
 },
    'mouseleave' : function () {
       $(this).find('#ultimecomunicazioni_appear').remove();
 }, '#ultimecomunicazioni'

});

edited Feb 03 '13 at 14:15

answered Feb 03 '13 at 13:59

mikakun

2,105
2
14
24

Uhm.. see your example live here http://goo.gl/8Nxnu (search for "Ultime comunicazioni", at the right should appear an element, like for "Ultime circolari", the widget just below, but nothing happens..) – MultiformeIngegno Feb 03 '13 at 14:06
if nothing happens, comes from css or html (typing error, no definition missing...) – mikakun Feb 03 '13 at 14:15

jQuery: converting .live to .on/.off

6 Answers6