Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

How can I change this JQuery to use "on"?

I'm new to JQuery and I need to change this code because it's deprecated. I've been looking at examples here
http://api.jquery.com/on/

.live is deprecated in Jquery 1.9. That article says to instead use "on".  This is the code I have. Should I just replace .live with "on" like this?

$(document).on('pageinit', function ()  


$(document).live('pageinit', function () {
	
	
	$(window).bind('pageshow', function () {
		addBodyClass();
	});
	
	function getActiveSec(){
		return $('section.ui-page-active').attr('id');
	}
	function addBodyClass(){
		$('body').attr('class', getActiveSec());
	}
});

Open in new window

0
Camillia
Asked:
Camillia
  • 5
  • 4
1 Solution
 
nickinthoozCommented:
try using document.ready

$(document).ready(function(){

	$(window).bind('pageshow', function () {
		addBodyClass();
	});
	
	function getActiveSec(){
		return $('section.ui-page-active').attr('id');
	}
	function addBodyClass(){
		$('body').attr('class', getActiveSec());
	}
});

Open in new window


The difference between using the event handler is that if you are pulling the page in from another then you'll be better off using .on, which yes you just replace live with on.  If you're loading the page directly, .ready is probably better for you.

If you're deadset on using on, you would use it like:

$(document).on('pageinit',function(){
    addBodyClass();
	});
	
	function getActiveSec(){
		return $('section.ui-page-active').attr('id');
	}
	function addBodyClass(){
		$('body').attr('class', getActiveSec());
	}
 });

Open in new window

0
 
CamilliaAuthor Commented:
so what's the difference between the 3 ( "live", 'on" and "ready" )? I'm making the change but dont understand the difference and what I'm doing..

Let me try the code
0
 
CamilliaAuthor Commented:
and one more question...i see you removed
$(window).bind('pageshow', function () {

from the orig code. Why did that need to be removed?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nickinthoozCommented:
It didn't, I left that out on accident.
0
 
CamilliaAuthor Commented:
oh, so it should the same as it was except "live" is replaced with "on"? correct?

$(document).on('pageinit',function(){
 $(window).bind('pageshow', function () {
    addBodyClass();
      });
      
      function getActiveSec(){
            return $('section.ui-page-active').attr('id');
      }
      function addBodyClass(){
            $('body').attr('class', getActiveSec());
      }
 });
0
 
nickinthoozCommented:
To answer your other question:

$(document).on('ready',initialize); will not work if the DOM is already ready when the file is executed.

$(document).ready() has a special handling for this: it ensures it is always called


$(document).ready(function(){
//your code goes here
});

Open in new window


$(document).on('pageinit',function(){
//your code
 });

Open in new window


Those are the two difference in the beginning and ending, in the middle you would put:

$(window).bind('pageshow', function () {
		addBodyClass();
	});
	
	function getActiveSec(){
		return $('section.ui-page-active').attr('id');
	}
	function addBodyClass(){
		$('body').attr('class', getActiveSec());
	}

Open in new window

0
 
CamilliaAuthor Commented:
Thanks, I took a JQuery class and still learning. Can you confirm my post ID: 39169359


is that correct? (and let me read your latest post)
0
 
nickinthoozCommented:
Yes, that post looks correct, your code would look like:
$(document).on('pageinit',function(){
          $(window).bind('pageshow', function () {
	                	addBodyClass();
                    	});
	
	 function getActiveSec(){
		return $('section.ui-page-active').attr('id');
	}
	function addBodyClass(){
		$('body').attr('class', getActiveSec());
	}
 });

Open in new window

0
 
CamilliaAuthor Commented:
you're great. Thanks for helping me out.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now