Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery – Better understanding of .live();

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #41172
    lyleyboy
    Member

    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.

    #116399
    elneco
    Participant
    #116401
    lyleyboy
    Member

    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

    #116405
    Senff
    Participant

    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.

    #116425
    tbwiii
    Participant

    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

    #116429
    TheDoc
    Member

    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!

    #116441
    Senff
    Participant

    @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 });

    #116443
    tbwiii
    Participant

    @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;
    }

    #116444
    Senff
    Participant

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

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

    #116471
    lyleyboy
    Member

    Awww you guys rock, thanks for your help.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.