jQueryで実装したタブメニューの中に、AjaxによってHTMLを表示させたい。

Question

###前提・実現したいこと
jQueryで実装したタブメニューの中に、AjaxによってHTMLを表示させたいと考えています。
具体的には、

<div class="rightbar2">
  <ul id="tabMenu" class="clearfix">
    <li><a href="#tabBox1">分類1</a></li>
    <li><a href="#tabBox2">分類2</a></li>
    <li><a href="#tabBox3">分類3</a></li>
  </ul>
  <div id="tabBoxes">
    <div id="tabBox1">ここに分類2が入る<ul></ul></div>
    <div id="tabBox2">ここに分類2が入る<ul></ul></div>
    <div id="tabBox3">ここに分類3が入る<ul></ul></div>
  </div>
</div>

$("#tabMenu li a").on("click", function(){
  $("#tabBoxes div").hide();
  $($(this).attr("href")).fadeToggle();
});

のようにして作ったタブメニューの中に、

$.ajax({
  url: "xml/parts_data.xml",
  type: "GET",
  dataType: "xml",
  timeout: 1000,
  error: function(){
    alert("ロード失敗");
  },
  success: function(xml){
    $(xml).find("item").each(function(){
      $("#tabBox1 ul").append('<li><div id="change-pattern1" class="btn-item"><img src="' + $(this).find('sample_src').text() + '" id="' + $(this).find('id').text() + '" title="' + $(this).find('texture_src').text() + '" class="img_list"></div></li>');
    });
  }
});

のようにしてHTML（imgタグなので画像）を表示させます。
しかし、一番最初の表示だけはうまくいくのですが、タブを切り替えた際に、それまで表示されていたimgタグが消えてしまいます。
Ajaxで整形し出力したHTMLが消えないようにタブを切り替えるにはどのようにすればよいのでしょうか？
わかりにくい質問かとは思いますがご回答を頂けると助かります_(..)

###試したこと
タブ切り替えのクリックの度に上記のコードを実行し、HTMLをAjaxで整形し出力すれば実現はできますが、それは効率が悪い気がして…
また、タブメニューに関しては下記サイトを参考にしています。
http://liginc.co.jp/web/js/jquery/34048

Answer 1

$(xml).find("item").each(function(){
  $("#tabBox1 ul").append('<li><div id="change-pattern1" class="btn-item"><img src="' + $(this).find('sample_src').text() + '" id="' + $(this).find('id').text() + '" title="' + $(this).find('texture_src').text() + '" class="img_list"></div></li>');
});

上記部分の、$("#tabBox1 ul") のセレクタが、#tabBox1 固定になっていますが、
おかしくないですか？
クリックされた tabBox にメニューを append する必要がありますよね？

以下のようなイメージではないですか？
取得済みなら、通信にいかずに fadeToggle のみ行う、などの制御は省いています。

$("#tabMenu li a").on("click", function(){
  var selectedMenu = $(this);
  $.ajax({
  	// 色々略
    success: function(xml){
      $(xml).find("item").each(function(){
      	selectedMenu.children("ul").append('<li><div id="change-pattern1" class="btn-item"><img src="' + $(this).find('sample_src').text() + '" id="' + $(this).find('id').text() + '" title="' + $(this).find('texture_src').text() + '" class="img_list"></div></li>');
      });
    }
  });
});

Comments

[tarotarosu]

試験的に行ってみたので#tabBox1を固定していました。
タブを切り替えた際に表示されていたものが消えてしまうことに疑問を感じています。
おそらくタブを切り替えたタイミングで必要なエレメントが存在しないためうまく表示されないのだとは思いますが、その部分の解決法がよくわかりません。
わかりにくいコメントですみません…

[root_jp]

$("#tabBoxes div").hide();
が追加した、<div id="change-pattern1" class="btn-item">
も隠してるからとかじゃないですかね。

tabBox を表示したところで、上記の子供は非表示のままのような気がします。
$("#tabBoxes > div").hide();
にしてみてはどうでしょう？

[tarotarosu]

ご回答のように修正したところ、タブを切り替えてもうまく表示できるようになりました！
自分自身が処理を追えていないとは情けないです…
ありがとうございました_(._.)_