Grow your CSS skills. Land your dream job.

jQuery – Better understanding of .live();

  • # December 5, 2012 at 5:56 am

    Hey all,

    I have this little snippet

    $(‘input[name=emailAddress]‘).focus();

    This won’t work because the form is inside a div which is loaded by ajax .load() to be exact.

    How can I tie this in to work with .live or something similar.

    Cheers all.

    # December 5, 2012 at 10:42 am

    use .on() http://api.jquery.com/on/

    # December 5, 2012 at 10:44 am

    Hey,

    Thanks.

    But. On what? This is intended to just happen on load.

    So $(”).on(‘click’,function(){()}; won’t work cos it never gets clicked. etc etc.

    Cheers

    # December 5, 2012 at 10:49 am

    Apparently, .live() was replaced sometime by .on(). From the jQuery site:

    > “As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().”

    However, I’ve seen instances in 1.7.4 and up where .on() just didn’t work and .live() actually did. So I’ve always been confused about this and haven’t had time to look further into it. So for me, if one doesn’t work, I try the other. And that does work sometimes.

    # December 5, 2012 at 1:44 pm

    To answer your question, you would usually need to tie the event to the parent that is always there and use the on method to listen as the event bubbles up the DOM, like so:

    $(“#parentDiv”).on(‘focus’, ‘input[name=emailAddress]‘, function () {
    // Do stuff
    });

    The problem is that the event “focus” does not bubble so what you could do is bind to to focus like you tried to originally – but do this in the “complete” function of your ajax call after the form has been appended to your parent div.

    Here’s an example on codepen: http://codepen.io/tbwIII/pen/ztBKC

    # December 5, 2012 at 1:53 pm

    If you find that `.on()` isn’t working it’s probably because you’re trying to use it on an element that wasn’t there on initial page load. This means you’ll need to apply the `on()` to something that’s already on the page and then listen for things that bubble up the DOM as @tbwiii mentions.

    If we use a Twitter panel as an example… Your `#twitter` div is going to be on the page when it loads, but likely you’re pulling in all of your tweets via an API. To be able to capture a hover event in jQuery on a tweet and you try this:

    $(‘.tweet’).on(‘hover’, function() { // something });

    It’s not going to work because `.tweet` has been loaded in via AJAX. You’ll need to do this:

    $(‘#twitter’).on(‘hover’, ‘.tweet’, function () {
    // something
    });

    Basically exactly what tbwiii said, just wanted to give another example!

    # December 5, 2012 at 3:11 pm

    @TheDoc: do I understand correctly then that .on() is NOT just a different name of .live(), but also needs a slightly different format/structure? I mean, this would have worked, correct?

    $(‘.tweet’).live(‘hover’, function() { // something });

    # December 5, 2012 at 3:18 pm

    @senff “on” only needs a different structure of you care what was hovered/clicked on inside of the original selector. If you only care that “.tweet” is hovered on:

    $(‘.tweet’).on(‘hover’, function() { // something });

    But if you want to know only when anchors on the tweet are hovered on

    $(‘.tweet’).on(‘hover’, ‘a’, function() { // something });

    “live” used to work by listening to every event all the time, but that was wasteful. It’s better if we can just specify a constant to listen to and evaluate the event for more specific data only when we need to.

    That’s what “on” does and that’s why live is deprecated. The jQuery source actually just takes anytime you use “live” and makes it the “on” method.

    function (types, data, fn) {
    jQuery(this.context).on(types, this.selector, data, fn);
    return this;
    }

    # December 5, 2012 at 3:23 pm

    > “live” used to work by listening to every event all the time, but that was wasteful.

    That’s exactly what I thought indeed. Thanks! :)

    # December 6, 2012 at 4:07 am

    Awww you guys rock, thanks for your help.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".