0

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');
        }
    });
});
user3913529
  • 1
  • 1

1 Answers1

0
  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.
dostrog
  • 31
  • 3
  • Hm… I have something like this $('div.goal-submit button').one('click', function () {…}); and it works... – dostrog Aug 06 '14 at 11:02
  • The behavior between the desktop and the app version of iBooks is a bit different in some cases. The code works perfectly on the iPad, but not on the desktop version. – user3913529 Aug 06 '14 at 11:37
  • Oops. I have not noticed that you meant iBooks for OS X. My comments were for iBooks for iOS. Sorry... – dostrog Aug 06 '14 at 12:00
  • No need to be sorry :) Thanks a lot for your comments! – user3913529 Aug 06 '14 at 12:17