23804

jQuery live() works with jQuery 1.8.3 & below but not with 1.9.1 or 2.0

Question:

I've been using <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js</a> for a while now and everything has been fine, but 1.8.3 got quite old so I've decided to move to the latest jQuery. And suddenly a few things stopped working: <a href="http://razorjack.net/quicksand/" rel="nofollow">Quicksand plugin</a> and part of my own jQuery code (that shows additional data under every slide of a slider).

Can you help me figuring out what's wrong? Or maybe it's not worth moving to jQuery versions above 1.8.3? Check the Jsfiddle.

HTML:

<a href="#" class="show" data-show="first">SHOW</a> <a href="#" class="show" data-show="second">SHOW</a> <div id="first">First paragraph.</div> <div id="second">Second paragraph</div>

JS:

jQuery(".show").live("click", function (e) { var slide = '#' + jQuery(this).data('show'); jQuery(slide).slideToggle(); e.preventDefault(); });

CSS:

div { display: none; }

Here's a working jsfiddle: <a href="http://jsfiddle.net/ABrna/" rel="nofollow">http://jsfiddle.net/ABrna/</a>

Try changing jQuery to 1.9.1 or 2.0 and hit Run. Script stops working. Why?

Answer1:

The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9.

<a href="http://jquery.com/upgrade-guide/1.9/#live-removed" rel="nofollow">http://jquery.com/upgrade-guide/1.9/#live-removed</a>

Answer2:

<blockquote>

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().

</blockquote>

<a href="http://api.jquery.com/live/" rel="nofollow">Doc</a>.

Answer3:

Equivalent to .live() using delegation with .on() is:

jQuery(document).on("click",".show", function (e) { var slide = '#' + jQuery(this).data('show'); jQuery(slide).slideToggle(); e.preventDefault(); });

But you shouldn't set delegation at document level but use instead closest static container.

Answer4:

jQuery 2.0 deprecate the live function. You can find more information in <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/" rel="nofollow">http://blog.jquery.com/2013/04/18/jquery-2-0-released/</a>

Recommend

  • CSS Bundling and Internet Explorer's Limit
  • Function to check if jquery plugins are already initialized
  • ReplaceWith carousel-inner with new items
  • How to push ViewController with slide effect from left to right? Animation name required
  • Transition height onload of d3js rect svg
  • Bootstrap Carousel Next/Prev not working
  • Can I have the market update an app that was installed from else where?
  • Grails/Roo for a .Net developer
  • Where to put clearQueue in jQuery code
  • Price range slider for my website
  • How to get value of the slider, when touchend or mouseup events are used?
  • How can I merge my files when the folder structure has changed using Borland StarTeam?
  • Can an iframe pop up a Lightbox-style box?
  • Keep transition effect on 1 div from moving the div that follows?
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Accessing Rows In A LINQ Result Without A Foreach Loop?
  • Retaining data after updating application
  • cell spacing in div table
  • How to handle elastic beanstalk deployment so it uploads only changed files
  • Filter strings with regex before casting to numeric
  • Tamper-proof configuration files in .NET?
  • How to define custom class, title, and target in Link Browser for content elements and the new rte_c
  • Meteor: Do Something On Email Verification Confirmation
  • How to clear text inside text field when radio button is select
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Recording logins for password protected directories
  • Splitting given String into two variables - php
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Check if a string to interpolate provides expected placeholders
  • Where to put my custom functions in Wordpress?
  • RestKit - RKRequestDelegate does not exist
  • How to get icons for entities from eclipse?
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • embed rChart in Markdown
  • JaxB to read class hierarchy
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app