Переключить видимость элемента с зепто

Question

HTML,:

<a id="the_link" class="folded" href="#">Click me</a> 
<div id="content">This is some content to be toggled.</div> 

две функции, которые каждый из шоу или скрыть содержание:

function shower() { 
    $("body").on("click", "#the_link.folded", function(event) { 
    $("#content").show(); 
    $("#the_link").html("Hde info").removeClass("folded").addClass("unfolded"); 
    }); 
} 

function hider() { 
    $("body").on("click", "#the_link.unfolded", function(event) { 
    $("#content").hide(); 
    $("#the_link").html("See more info").removeClass("unfolded").addClass("folded"); 
    }); 
} 

If I use jQuery, код работает:

$(document).ready(function() { 
    shower(); 
    hider(); 
}) 

If I use Zepto , код не работает:

Zepto(function($){ 
    shower(); 
    hider(); 
}) 

Почему?

Answer 1

совершенно странно, я действительно не использовал zepto раньше. Но вы правы, что в библиотеке есть что-то неправильно (или именно так они работают).

проблема в том, что привязка, даже если элемент уже не существует, не работает.

И если вы измените класс элемента на лету, то одно и то же событие будет привязано к нему, хотя класс изменился. , поэтому вам нужно отключить отключение события, а затем повторить его в другой функции и наоборот. jsfiddle

function shower() { 
    $("body").on("click", "#the_link.folded", function(event) { 
     console.log('shower function'); 
    $("#content").show(); 
    $("#the_link").removeClass("folded").addClass("unfolded").html("Hde info"); 
     $("body").off("click", "#the_link.folded"); 
     hider(); 
    }); 
} 

function hider() { 

    $("body").on("click", "#the_link.unfolded",function(event) { 
     console.log('hider function'); 
    $("#content").hide(); 
    $("#the_link").removeClass("unfolded").addClass("folded").html("See more info"); 
     $("body").off("click", "#the_link.unfolded"); 
     shower(); 
    }); 
} 


    shower(); 
    hider();