Question

I want to change the style of a page between two different .css files when the user clicks a link.

When the link is clicked, I want the new style to be loaded. When it is clicked a second time, I want the default style to be loaded. (In other words, I want to be able to toggle between two different stylesheets on a click event).

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', 'defaultStyle' );
      $('.default').addClass('new').removeClass('default');
   });

});
$(function(){
   $('.new').click(function(){
      $('#link').attr('href', 'secondStyle' );
      $('.new').addClass('default').removeClass('new');
   });
});

The code above changed the style once, but the second block doesn’t work.

How can I fix this? TIA.

Answer 1

try

$('.new').live('click',function(){});

http://api.jquery.com/live/