Papermashup

Subscribe


Tweets


"RT @cpray86: Good to see the receptionist's Jpeg of an Excel file is coming along nicely... #TheApprentice https://t.co/uiPGhf64U3"

@ashleyford 1 day ago

"Translation wrong for this paper it should be: Bitte nicht den Horror-Clown (Please not the Horror-clown) https://t.co/RYOD6aND6s via @bandt"

@ashleyford 3 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

jQuery Event Delegation

This article explains how to use use the deprecated method .live(). Instead use .on() which has the same effect

AshleyAshley
This tutorial has been updated to reflect the .live() jQuery method being depreciated and removed in the latest version of jQuery. So this tutorial now uses the .on() click event.

When I first started using jQuery to make AJAX requests event delegation always caught me out as I never understood what it was or how to use it. If you’re manipulating the DOM you will surely come across the problem of when you dynamically add an element to a page you can’t just go and add an event handler to this new element and expect it to work. For instance say I have a list item which is clickable with the aid of a click event. If it’s setup so when I click the list item a completely new list item is automatically added to the page, without the use of event delegation or the function .live() the new list item won’t trigger the click function because the click function was initiated once our page was loaded, and since we added this item dynamically (meaning the page didn’t refresh) the event hasn’t been set to work with this new element.

How it works

Here’s an example of event delegation using the .live() function which is chained to our .click function.

The .live() method was depreciated in version: 1.7, and removed: 1.9. Instead of .live() use .on() more information on this method can be found here: jQuery .on() API Documentation

The official jQuery documentation states: “The .live() method is able to affect html elements that have not yet been added to the DOM by using event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.”


$("document").ready(function() {
    $("ul").on("click", "li", function(){
      $(this).after("
  • Click here to add another list item
  • "); }); });

    And the HTML:

    
    
    • Click to add a list item

    You can find out more about the .live() method over at the official jQuery documentation.

    demo

    Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

    Comments 4
    • RCKY
      Posted on

      RCKY RCKY

      Reply Author

      Dont get me wrong, no offense (think i missed the tone)! I’ve just remarked that… i like your blog *flowers* 😉


      • Ashley
        Posted on

        Ashley Ashley

        Reply Author

        @Rcky, Hey no worries none taken! Thanks for pointing it out its a great resource. This blog is all about helping other designers and developers and building a community so feel free to post useful tips and links anytime :) (thanks for the flowers) 😉


    • RCKY
      Posted on

      RCKY RCKY

      Reply Author

      hehe i’ve seen and enjoyed the nettuts vid too…


      • Ashley
        Posted on

        Ashley Ashley

        Reply Author

        @Rcky, ha ha I never even saw that post! for anyone else here’s a screencast over at nettuts.com which demonstrates a similar technique using regular javascript.