Ajaxは複数回読み込まれ、スクリプトは複数回読み込まれます

Question

私はこの質問の半分をすでに尋ねましたが、私はデバッグを始めてコードを使いこなし始めました。私のウェブサイトでは、http://www.yokaproject.com/、議論のためにこれは私があなたがしたいものです。アートタブを最初にクリックすると、コンソールのスクリプト長に2つのログが表示され、その他にはそれぞれajaxコール、5と1が表示されます。なぜ私が5を記録するのかわからない、私は4つの既知のスクリプトを持っています。次に、次のタブ、音楽をクリックして、スクリプトの長さを8回記録し、ajaxコールを2回、なぜですか？さらに、このパターンで追加を続けます。私はこの非常に単純な要求を持っています、私と一緒にこれに協力してください。私のためのコードを書くことを言ったり、私にすべてを教えたりするのではなく、実際に自分のミスを訂正する方法を教えてください。実際に私は誰かとチャットしてこの問題に取り組むだろう、私は本当に良いJSを書いてほしい。それはここで言って私のコードは、（私のスクリプトのチェック機能がそれをコメントアウトするためのもの無視する）である：

*これはちょうど私のAjaxの機能で、ときhttp://www.yokaproject.com/index.html

function handlersAttached(){ 
    $('.header a').on('click', ajaxLoad); 

} 

handlersAttached(); 


function ajaxLoad(e) { 
    console.log($("script").length); 
    console.log("ajax called"); 
    e.preventDefault(); 
    var url = $(this).attr("href"); 
    var that = $(this); 
    that.off('click'); // remove handler 
    $.ajax({ 
     url: url, 
     dataType: "html", 
     type: "GET", 
     cache: false 
    }).done(function(data){ 
     $("#container").html(data); 
    }) 
}; 

Answer 1

、さらに詳細を確認するために私のウェブサイトをご確認ください。あなたはajaxリクエストを送信し、あなたのリクエストであなたのページの内容を変更します。あなたは以前のスクリプトを再度読み込み、関数は何度も何度も実行します。 あなたの問題を解決するためにajaxリクエストでプレーンhtmlをリロードすることをお勧めします。

あなたは、PHPで動作する場合、最初のクリック$(scripts)でお

<?php if(!isset($_GET['ajax'])) include "header.php" //your style here ?> 
// your page code 
<?php if(!isset($_GET['ajax'])) include "footer.php" // your script here?> 

Answer 2

のためのこのコードの動作のようないくつかのものは、次のタグが返されました：

：次の1以下で

<script async="" src="https://www.google-analytics.com/analytics.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script> 
<script type="text/javascript" src="../assets/load_scripts.js"></script> 
<script>/*google analytics stuff*/</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script> 
<script src="../assets/load_scripts.js"></script> 
<script async="" src="https://www.google-analytics.com/analytics.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script> 
<script type="text/javascript" src="../assets/load_scripts.js"></script> 
<script>/*google analytics stuff*/</script> 

最初の3つは、DOMツリーごとに追加されているようですあなたのajaxコールが実行されたime。さらに、load_scripts.js自体がその中にあるので、次のクリックでより多くのajax呼び出しが生成され、より多くのトリガーされたハンドラーはそれぞれconsole.logとなります。

解決策：ajaxレスポンスにスクリプトを含めないでください。少なくとも、DOMツリーにスクリプトを追加しないでください。あなたが達成しようとしているものに依存します:)