Turn.js目录链接问题

Question

我在与Turn.js合作的一个项目中遇到了一点小麻烦。我正在尝试创建一个“目录”，有可点击的链接，链接到可以找到内容的页面。我所做的似乎有几次是有效的，但随后它就停止了。

HTML：

<div id="flipbook">
    <div class="hard"><p>Turn.js</p></div> 
    <div class="hard"></div>
    <div>
        <div class="button-container">
            <button data-page="4">Go To Page 1</button>
            <button data-page="5">Go To Page 2</button>
            <button data-page="6">Go To Page 3</button>
            <button data-page="7">Go To Page 4</button>
            <button data-page="8">Go To Page 5</button>
            <button data-page="9">Go To Page 6</button>
            <button data-page="10">Go To Page 7</button>
            <button data-page="11">Go To Page 8</button>
        </div>
    </div>
    <div><p>Page 1</p></div>
    <div><p>Page 2</p></div>
    <div><p>Page 3</p></div>
    <div><p>Page 4</p></div>
    <div><p>Page 5</p></div>
    <div><p>Page 6</p></div>
    <div><p>Page 7</p></div>
    <div><p>Page 8</p></div>
    <div class="hard"></div>
    <div class="hard"></div>
</div>
<button class="reset" data-page="3">Reset</button>

JS：

$("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
});

$("button").click(function(){
    $("#flipbook").turn("page", $(this).data('page'));
});

这里有一个jsfiddle：http://jsfiddle.net/ddcarr/fveoyv4o/1/

我的设置基本上是一样的，在book元素之外有一个总是有效的重置按钮。这让我相信要么是指针事件的问题，要么是z索引的问题。到目前为止我还没有运气，如果有人能给我指明正确的方向，我将不胜感激。

谢谢!

Answer 1

我有一个解决你问题的办法。

你需要这样做，

$(document).on('click','button',function(){
    $("#flipbook").turn("page", $(this).data('page'));
});

这将会像你所期望的那样工作的很好！我希望它能对你有所帮助。:)