Простая jQuery таблица стилей

Question

Я пытаюсь создать swapper на веб-сайте. У меня есть одна ссылка, и я бы хотел поменять местами между двумя .css-файлами при каждом нажатии на нее. После первого щелчка я вижу, что классы и файлы swaping, но после второго щелчка, ничего не происходит вообще ...

Вызов:

<a href="#" id="swaper" class="ozn color_ozn" >SWAP</a> 

JQuery код:

google.load("jquery", "1.3.1"); 
google.setOnLoadCallback(function() { 
    $(".color_ozn").click(function(){ 
     $("link").attr("href", "link_to_style1.css"); 
     $("#swaper").removeClass("color_ozn"); 
     $("#swaper").addClass("color"); 
     return false; 
    }); 

    $(".color").click(function(){ 
     $("link").attr("href", "link_to_style2.css"); 
     $("#swaper").removeClass("color"); 
     $("#swaper").addClass("color_ozn"); 
     return false; 
    }); 

}); 

Answer 1

Поскольку вы обмениваетесь классы динамически, вы должны использовать event delegation в этом контексте для достижения того, чего хотите.

Try,

$('body').on('click',".color_ozn",function(){ 
    $("link").attr("href", "link_to_style1.css"); 
    $("#swaper").removeClass("color_ozn"); 
    $("#swaper").addClass("color"); 
    return false; 
}); 

и

$('body').on('click',".color",function(){ 
    $("link").attr("href", "link_to_style2.css"); 
    $("#swaper").removeClass("color"); 
    $("#swaper").addClass("color_ozn"); 
    return false; 
});