2回目のクリックでajax経由でjson lotをロード

Question

私はjQueryとajaxの初心者です。私はクリックされたナビゲーションオプションに応じて、同じjsonファイルから異なるコンテンツが読み込まれるアプリケーションを作成しています。

これは私のコードです：

$(document).ready(function(){ 

    var $wrapper = $(".wrapper"); 
    $(document).on("click", ".navLink", loadRecipes); 
    function loadRecipes(){ 

     var type = $(this).attr("href"); 
     $.ajax({ 

      type: "GET", 
      url: "recipes.json", 
      cache: false, 
      success: function(data){ 
      for(var i = 0; i < data.recipes.length; i++){ 

       var recipe = data.recipes[i]; 
       if(type == recipe.type){ 

        var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
        $wrapper.append(name); 

       } 

      } 

     }); 
     return false; 

    } 

}) 

とJSONのようなものになります。

{ 
"recipes":[ 
{"name": "A", "type":"type1"}, 
{"name": "B", "type":"type2"}, 
{"name": "C", "type":"type2"}, 
{"name": "C", "type":"type1"} 
] 
} 

をhref属性は、JSONファイルでtype属性と一致します。 特定のリンクをクリックすると、jsonの特定の要素が読み込まれます。 最初にリンクの1つをクリックすると、適切なコンテンツが読み込まれます。 しかし、別のリンクをクリックしようとすると、clickイベントが発生しますが、jsonコンテンツはロードされません。 clickイベントにイベントデリゲートを導入しましたが、それは役に立ちませんでした。 私はそれがキャッシュに問題があるかもしれないと思ったので、私はcache：falseパラメータを追加しましたが、助けにもなりませんでした。 誰かが私に何か不足しているかもしれないかの手がかりを与えることができれば、私はそれを感謝するでしょう。

Answer 1

なぜ同じAjaxが2回ロードされないのか、同じリンクから同じコンテンツを取得します。

$(document).ready(function(){ 

var $wrapper = $(".wrapper"); 
$(document).on("click", ".navLink", loadRecipes); 
function loadRecipes(){ 

    var type = $(this).attr("href"); 
    $.ajax({ 

     type: "GET", 
     url: "recipes.json?type=" + type, 
     dataType: "JSON", 
     cache: false, 
     success: function(data){ 
      var recipe = data; 
      var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
       $wrapper.append(name); 

     } 

    }); 
    return false; 

} 

}）

変更サーバ回答は、変数を入力によって異なります。 は、おそらくこのような何かあなたのために適切であろう。

{"name": "B", "type":"type2"} 

それとも、すべてのタイプを取得し、クリック時に単なるラッパーにそれを追加するために、任意のイベントに一度だけのAjaxを設定することができます。答えは、あなたがデータを必要とするだけになります。

Answer 2

インディラ、ご協力いただきありがとうございます。私はあなたのソリューションを使用しようとしましたが、動作しませんでした。しかし、あなたが「同じリンクから同じコンテンツを取る」と書いたことで私は思っていました。異なるデータタイプを別々のjsonファイルに分けようとしましたが、それでも動作しませんでした。私はしかし、開発者ツールのネットワークタブで、リンクをクリックすると適切なファイルがロードされていることに気がつきました。実際、私が$（ "。wrapper"）にロードしていたhtmlは、私の問題を説明する際には関係がなかったので、もっと複雑になりました。結果として得られた要素は、ページ上にもっと多くのスペースを必要としました。そして私はちょっとばかげている気がしますが、新しいコンテンツが実際に読み込まれていることに気付きましたが、ページの一番下には古いコンテンツが一番上に残っていました。問題の解決策は、成功応答関数の先頭にある$（ "。wrapper"）を空にすることです。