
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>