javascript - フリップブックが表示されず、エラーが表示される

Question

機能性:

ユーザーはフリップブック内を移動でき、フリップブックを終了すると、メニューからフリップブックに再び入ることができ、フリップブック内を移動し続けることができます。ユーザーがメイン メニューからフリップブックに入るたびに、フリップブックは最初のページにリセットされます。

行われたこと:

プラグインturnjsからフリップブックを作成しました。さらに、ユーザーがフリップブックを終了してメニューに戻ることができる戻るボタンと、ユーザーがフリップブックをナビゲートできるようにするフリップブックのナビゲーション ボタンを追加しました。

問題：

ユーザーがフリップブックを再入力すると、ページが空白になり、フリップブックをフリップできませんが、フリップブックのページはまだ空白のままです。デバッグすると、次のエラーが表示されます。

turn.js:1260 Uncaught TypeError: Cannot read property 'data' of undefined により、turn.js の次の行がアスタリスクで強調表示されます:

var optsCorners = data.opts.turnCorners.split(','),
  ***flipData = data.pages[current].data().f,***
  opts = flipData.opts,
  actualPoint = flipData.point;

そのため、問題を修正する方法についてお尋ねしたいと思います。どんな助けでも大歓迎です。ありがとう

コード：

function Models() {
  console.log("Models");

  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    autoCenter: false,

  });
}

function PreviousPage() {
  console.log("LifeStories");

  $("#Model_flipbook").load("Stories.html #Models_Page");

  $('#Button3').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Models_Page').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Models_Page').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#1_Page').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#1_Page').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });
}

#Button3 {
  position: absolute;
  top: 400px;
  left: 1520px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#LeftSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 0px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#RightSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 1691px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#PageBack {
  position: absolute;
  top: 970px;
  left: 50px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">

  <button id="LeftSide" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/RoleModel(KeyNote)/RoleModel(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)/Model(KeyNote)_2.jpeg" />
    </div>
    <button id="PageBack" onclick="PreviousPage()">
      <img src="lib/img/VideoBackButton.png">
    </button>
  </div>

したがって、次の問題を修正するにはどうすればよいですか?また、ユーザーが一度終了した後にフリップブックを再入力すると、フリップブックが最初のページにリセットされますか?