infinite scroll（無限スクロール）が読み込まれない

【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。
https://on-ze.com/archives/2486
を参考にinfinite scrollを実装してみましたが正しく読み込まれません。

【追記】

現在の状況・・・
「無限スクロールで次のページであるindex2.htmlファイルが自動で読み込まれまず、添付画像のように”次のページへ”とリンクテキストが表示されます」

期待した動作・・・
スクロールするとindex2.htmlファイルが自動で読み込まれることです。

MAMPのローカル（サーバ）環境で再現しています。

infinite scrollは公式からダウンロードしています。
https://infinite-scroll.com/

jQuery詳しい方お願いします・・・

index.html
1
2<!DOCTYPE html>
3<html lang="ja" dir="ltr">
4<head>
5  <meta charset="utf-8">
6  <title></title>
7
8  </head>
9<body>
10
11  <style>
12  img{
13width:300px;
14height:300px;
15  }
16</style>
17
18
19  <div id="content">
20    <div class="article">
21    <div>
22      <!--<img src="images/adventure-automobile-classic-2533092.jpg">-->
23      <img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg">
24    </div>
25
26    <div>
27      <!--<img src="images/apartment-bed-bedroom-2082087.jpg">-->
28      <img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg">
29
30    </div>
31
32    <div>
33      <!--<img src="images/architecture-art-artistic-1702624.jpg">-->
34      <img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg">
35
36    </div>
37
38    <div>
39      <!--<img src="images/architecture-buildings-campus-220351.jpg">-->
40      <img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg">
41
42    </div>
43
44    </div><!--article-->
45
46    <div class="navigation">
47      <p><a href="scroll2.html">次のページ</a></p>
48    </div>
49  </div>
50</body>
51
52
53<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
54<script src="js/infinite-scroll.pkgd.min.js"></script>
55<script>
56$(function(){
57  $('#content').infinitescroll({
58    navSelector  : ".navigation",
59    nextSelector : ".navigation a",
60    itemSelector : ".article"
61  });
62});
63</script>
64
65
66</html>
67

index2.hml
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6</head>
7<body>
8
9  <style>
10  img{
11width:300px;
12height:300px;
13  }
14</style>
15
16
17  <div id="content">
18    <div class="article">
19      <div>
20        <!--<img src="images/argument-bench-breakup-984949.jpg">-->
21        <img src="https://cdn.pixabay.com/photo/2019/07/16/20/48/dolomites-4342572_1280.jpg">
22      </div>
23
24      <div>
25      <!--  <img src="images/athletes-exercise-feet-2526878.jpg">-->
26      <img src="https://cdn.pixabay.com/photo/2019/07/16/20/48/dolomites-4342572_1280.jpg">
27
28      </div>
29
30      <div>
31        <!--<img src="images/bowl-centimeter-delicious-1332189.jpg">-->
32        <img src="https://cdn.pixabay.com/photo/2019/07/16/20/48/dolomites-4342572_1280.jpg">
33
34      </div>
35
36      <div>
37        <!--<img src="images/clouds-cold-dawn-2104152.jpg">-->
38        <img src="https://cdn.pixabay.com/photo/2019/07/16/20/48/dolomites-4342572_1280.jpg">
39
40      </div>
41
42    </div>
43    <div class="navigation">
44      <p><a href="index-3.php">次のページ</a></p>
45    </div>
46  </div>
47</body>
48</html>
49

現在のファイル状況


<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>

</head>
<body>

  <style>
    img{
      width:300px;
      height:300px;
    }
  </style>


  <div class="container">

    <div class="container">
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    </div>

    <!--<img src="images/adventure-automobile-classic-2533092.jpg">-->

    <!--<img src="images/apartment-bed-bedroom-2082087.jpg">-->

    <!--<img src="images/architecture-art-artistic-1702624.jpg">-->

    <!--<img src="images/architecture-buildings-campus-220351.jpg">-->

    <a class="pagination__next" href="/page/2">次のページへ</a>
  </div><!--container-->

  <!--<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>-->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="js/infinite-scroll.docs.min.js"></script>
  <script>

    $('.container').infiniteScroll({
      // options
      path: '.pagination__next',
      append: '.post',
      history: false,
    });

  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

  <style>
  img{
    width:300px;
    height:300px;
  }
</style>


<div class="container">

  <div class="container">
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
  </div>

  <a class="pagination__next" href="/page/2">次のページへ</a>

</div><!--container-->
</body>
</html>

8zca

2019/09/23 06:46

読み込むJSは infinite-scroll.docs.min.js であっていますか？公式では infinite-scroll.pkgd.min.js を読み込むようです。

退会済みユーザー

2019/09/24 04:55

そちらも試しましたが全く動作しませんでした・・・

Lhankor_Mhy

2019/09/24 07:06

「正しく読み込まれません」とは具体的には何が起きていますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

退会済みユーザー

2019/09/24 08:54

先ほど追記しました。一部わかりづらい箇所がありました。正しくは・・・「次のページであるindex2.htmlファイルが読み込まれまず、そのままテキストで表示されてしまいます。」です。期待している動作は・・・「スクロールするとindex2.htmlファイルが読み込まれる」です。お手隙の際にでもご確認ください。よろしくお願いします。

Lhankor_Mhy

2019/09/24 09:30

「そのままテキストで表示される」というのは、 <html lang="ja" dir="ltr"> のように、HTMLで表示される、ということでしょうか？

退会済みユーザー

2019/09/24 11:02

いえ。ちがいます。テキストですね。画像も添付してます。（要件）定義の確認でしたら「無限スクロールで次のページであるindex2.htmlファイルが自動で読み込まれまず、添付画像のように”次のページへ”とテキストが表示されます」ですね。よろしくお願いします。

Lhankor_Mhy

2019/09/24 11:24

ああ、リンクテキストのことなのですね。了解しました。 MAMP環境で、localhostのURLで表示しているという理解で合っていますか？開発者ツールに、エラーメッセージなどは表示されていませんか？

Lhankor_Mhy

2019/09/24 11:35

スクリーンショットだと、 js/infinite-scroll-docs.min.js ソースコードだと、 js/infinite-scroll.docs.min.js となっていますが、これは実際には同じファイル名になっていますか？

Lhankor_Mhy

2019/09/24 12:05

$('#content').infinitescroll({ ↓ $('#content').infiniteScroll({ ではないでしょうか？

Lhankor_Mhy

2019/09/24 12:06

あと、ご参考にされているのが、古い記事ようですね。パラメータが変わっています。公式のドキュメントをお読みになった方がいいかと思います。 https://infinite-scroll.com/#initialize-with-jquery

退会済みユーザー

2019/09/25 04:01

コメントありがとうございます。 >リンクテキストのことなのですね。はい。丁寧に表現ですべきでした。（中々難しいです・・） > 現在修正で指摘のあった「js/infinite-scroll.pkgd.min.js」に変更しています。 > $('#content').infiniteScroll({ 変更してみましたが「期待している動作」にはならずでした。 > 公式のドキュメントをお読みになった方がいいかと思います。「Initialize with jQuery」まで翻訳してindex.htmlとindex2.htmlファイル修正してみました。それでもダメです、、修正したバージョンを追記します。

Lhankor_Mhy

2019/09/25 06:17

追記拝読。追記いただいたコードでも、js/infinite-scroll.docs.min.js となっていましたが、これはそちらのコードでは修正されているということでしょうか？それでしたら、当方では（hrefのリンク先と、js/infinite-scroll.docs.min.js を差替えた上で）ご提示のコードで動作確認できています。

退会済みユーザー

2019/09/25 06:31

先ほど解決しました。ご指摘のあった・最新版のパラメータと内容に変更（公式引用）・hrefのリンク先を修正・js/infinite-scroll.pkgd.min.jsに変更で解決できました！ありがとうございます。古いヴァージョンの記事を選んだ自分のミスです・・。 Lhankor_Mhyさんのご指摘で解決しましたのでもし宜しければ直近のメッセージ「追記拝読...」を回答に添付してもらえればベストアンサーにしたいと思います。ご検討宜しくお願いします。（お手数おかけしました。）

Lhankor_Mhy

2019/09/25 06:48

ご解決されて何よりです。自己解決の処理をしていただけますと、助かります。

退会済みユーザー

2019/09/25 09:29

了解しました！的確なアドバイス感謝します。

行動規範の内容に同意します

回答1件

ベストアンサー

Lhankor_Mhyさんのアドバイスで下記内容に修正して解決しました。
古い記事を参考にするのではなく、（なるべく）公式サイトの内容を参考する方が良いです。

・最新版のパラメータと内容に変更（公式引用）
・hrefのリンク先を修正
・js/infinite-scroll.pkgd.min.jsに変更

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>

</head>
<body>

  <style>
    img{
      width:300px;
      height:300px;
    }
  </style>


  <div class="container">

    <div class="container">
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
      <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    </div>

    <!--<img src="images/adventure-automobile-classic-2533092.jpg">-->

    <!--<img src="images/apartment-bed-bedroom-2082087.jpg">-->

    <!--<img src="images/architecture-art-artistic-1702624.jpg">-->

    <!--<img src="images/architecture-buildings-campus-220351.jpg">-->

    <a class="pagination__next" href="scroll2.html">次のページへ</a>
  </div><!--container-->

  <!--<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>-->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="js/infinite-scroll.pkgd.min.js"></script>
  <script>

    $('.container').infiniteScroll({
      // options
      path: '.pagination__next',
      append: '.post',
      history: false,
    });

  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

  <style>
  img{
    width:300px;
    height:300px;
  }
</style>


<div class="container">

  <div class="container">
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
    <article class="post"><img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_1280.jpg"></article>
  </div>

  <a class="pagination__next" href="index3.html">次のページへ</a>

</div><!--container-->
</body>
</html>

投稿2019/09/25 09:33

退会済みユーザー

総合スコア0