iBooks中的jQuery

Question

I'm trying to create an interactive glossary for an iBooks eBook: each time you click on a term, the definition shows at the end of the page. You can hide the definition either by clicking again on the term or by clicking on another term. In this case, there are two terms. I've used jQuery and everything seems to work fine on Safari, Google Chrome and Mozilla Firefox. However, it doesn't work properly in iBooks for desktop (it does work as expected in iBooks for iPad), where you can open the definitions only once and not hide them.

What could be wrong?

The code I used is:

$(document).ready(function () {
    $('a').on('touchstart click', function (e) {
        e.preventDefault();
        $current = $($(this).attr('href'));

        if ($current.hasClass('hide')) {
            resetLabels();
            $current.removeClass('hide').addClass('show');
        } else if ($current.hasClass('show')) {
            resetLabels();
            $current.removeClass('show').addClass('hide');
        } else {
            resetLabels();
        }

        function resetLabels() {
            $current.siblings().removeClass('show').addClass('hide');
        }
    });
});

Answer 1

1. Try to use $(document).bind('pageinit', function() {…}); instead $(document).ready…
2. I recommend using jQuery together with jQuery Mobile ( http://jquerymobile.com ) for widgets in iBooks.