javascript - 第7个div后代码中断

Question

使用turn.js

$("#flipbook").turn({
    shadows: $.isTouch,
    acceleration: $.isTouch,
    autoCenter: true
}); 

和我自己的自定义代码(在这里我得到了一些帮助)

<script>
    var words = ['a','able','about','after','all','along','Along','an','and','And','arrived','as','asked','at','ate','attacked','baby','back','bad','baddies','be','became','before','Before','Behind','behind','being','big','biting','boat','borrowed','boy','boys','burst','by','came','care','causing','children','chores','collect','come','common','continued','couple','cut','dango','day','decided','demon','demons','did','did','difficult','do','dog','doing','eat','energy','enjoy','even','ever','everyone','evil','farewell','fight','find','firewood','floating','for','found','friends','from','gate','gave','gift','give','go','God','gold','got','green','grew','guessed','guys','had','happily','have','he','He','heard','help','her','him','his','home','houses','However','husband','in','including','into','is','island','it','Japan','Japanese','joined','journey','keep','lady','large','laundry','left','lived','looked','lot','lots','man','mean','met','momo','Momotaro','monkey','more','mountain','much','name','never','no','not','of','off','ogres','old','on','Once','once','One','one','open','out','own','pain','path','peach','pecking','people','pheasant','power','problems','quest','quickly','ran','real','red','returned','river','said','sailed','saw','screamed','see','seen','sell','set','She','she','shock','smashed','so','some','soon','special','spotted','stayed','stolen','stop','story','strong','surprised','take','Taro','tasty','terrible','terrorising','that','The','the','their','them','there','they','They','things','this','though','thought','through','time','to','too','took','up','upon','used','Using','using','village','walked','was','way','were','When','when','where','which','while','with','woman','work','would','you'],

    reg = new RegExp('\\b(' + words.join('|') + ')\\b', 'g');

    jQuery('.thestory').html(function (_, curHtml) {
        return curHtml.replace(reg, "<a href='#' class='$1'>$1</a>");
    });
</script>

<script>
    $( document ).ready(function() {
        function addSource(elem, path) {
            $('<source>').attr('src', path).appendTo(elem);
        }
        $('a').on('click', function(e) {
            var target= $(e.target);

            for (i in words) {
                if (target.hasClass(words[i])) {
                    var audio = $('<audio />', {
                        autoPlay : 'autoplay'
                    });
                    addSource(audio, 'audio/'+words[i]+'.mp3');
                    addSource(audio, 'audio/'+w[i]+'.ogg');
                    audio.appendTo('body');     
                }
            }
        });
    });
    </script>

#flipbook代码将我的两个自定义代码分开，它们在我的页面上按该顺序排列，并分成不同的<script>标签(我喜欢将脚本用于组织)。

在第7页(第7个div .p7)之后，单击单词不再发出声音...可能是什么问题？

我借助Google云端硬盘在Fiddle上重新创建了页面。

另外，这是否有理由不能在Android平板电脑上使用吗？

更新:
删除turn.js脚本并让页面自然流动(将overflow:hidden;从#viewport删除是完美的。但是我希望使用turn.js实现此效果...。

Answer 1

它在我的测试中正常工作，我将您的函数置于turn.js turn事件中。

$("#flipbook").bind("turned", function(event, page, view) {

  $('a').on('click', function(e) {
    target = $(e.target);

for (i in words) {
if (target.hasClass(words[i])) {
 var audio = $('<audio />', {
          id : words[i],
autoPlay : 'autoplay'
});
addSource(audio, 'https://googledrive.com/host/0B5Ubvdjb2dQUUEFIa2JUMkkzNFE/audio/'+words[i]+'.mp3');
//addSource(audio, 'https://googledrive.com/host/0B5Ubvdjb2dQUUEFIa2JUMkkzNFE/audio/'+words[i]+'.ogg');
audio.appendTo('body');
}
}

  });
});