見出し画像

jQuery同士は混ぜるなキケン!!

Whale1107

jQueryの二重読み込みは避けた方が良き

その理由はズバリ、「jQuery同士が干渉し不具合が起きる」からですね。
まぁ、どこかで「二重読み込みなんて意味わからないこと絶対にしない！！」と突っ込まれる声がしそうですが、はい、通常はしません。私も。。普通はね。。。
以下が私が犯した失敗の事例なり。。

なぜやったのか？

二重読み込みを犯した理由は、HTMLをパーツ化し、load()で読み込んだ結果、読み込む側と読み込まれる側の両方にjQueryを<script>していた、からですね、はい。なぜかって？パーツ化したHTMLにもjQueryの処理を書いていたので、つい癖で。。。ほんの出来心なんですよぉ。（泣）
つまり、ざっと以下のような状況です。(内容はテキトーです)

読み込む側のHTMLさん(index.html)

<html>
    <head>
        <script src=“jquery.js” type=“text/javascript”></script>
    </head>
    <body>
        <div></div>
        <script>
         $(‘div’).load(‘hoge.html’);
        </script>
    </body>
</html>

読み込まれる側のHTMLくん(hoge.html)

<script src=“jquery.js” type=“text/javascript”></script>
<button>ボタン</button>
<script>
   $('button').on('click', function() {
       console.log('クリックされました！');
   })
</script>

ふたつを混ぜると.....ホクホクした二重読み込みの出来上がり

<html>
    <head>
        <script src=“jquery.js” type=“text/javascript”></script>
    </head>
    <body>
        <div>
            <script src=“jquery.js” type=“text/javascript”></script>
            <button>ボタン</button>
            <script>
               $('button').on('click', function() {
                   console.log('クリックされました！');
               })
            </script>          
        </div>
        <script>
         $(‘div’).load(‘hoge.html’);
        </script>
    </body>
</html>

まとめ

・jQueryの二重読み込みは基本的にご法度でした(泣)。。

はぁ、疲れたからーめん食べたい。。。


この記事が気に入ったらサポートをしてみませんか？