jqueryでhtmlをsortすると、その子要素のon('click')が効かなくなる

Question

現在、店舗の商品をまとめるWebアプリを作成しています。

今回jQuery周りで問題が発生している2つの機能は以下になります。

【詳細の表示切り替え】
ページには「商品名」とその「詳細」の一覧が表記されており、「商品名」をクリックすると、デフォルトでdisplay: none;になっている「詳細」がjQueryのslideToggleで表示される仕組みです。

【項目順にソート】
ページの上部には「項目」があり、「項目」をクリックすると、jQueryを用いて「タイトル」を「項目」順にsortすることができます。

【問題点】
今回、遭遇した問題点は以下になります。

「詳細」がslideされる機能と、「項目」順にsortされる機能、それぞれ単体では期待通り動作することを確認しました。しかし、一度sortしてから「商品名」をクリックしても「詳細」がslideされなくなります。

ある程度調べたのですが、解決できる答えまで辿りつけなかったです。
jQueryが分かる方いらっしゃいましたら、ご教授宜しくお願いします。

<div class="container">
  <div class="sort">
    <ul>
      <li rel="name">名前</li>
      <li rel="detail">値段</li>
    </ul>
  </div>
  <div class="list">
    <div class="product">
      <div class="name">〇〇</div>
      <div class="detail">●●円</div>
    </div>
    <div class="product">
      <div class="name">□□</div>
      <div class="detail">■■円</div>
    </div>
    <div class="product">
      <div class="name">△△</div>
      <div class="detail">▲▲円</div>
    </div>
  </div>
</div>

.detail {
  display: none;
}

$(function() {
  $('.sort ul li').on('click', function() {
    var rel = $(this).attr('rel');
    $('.list').html(
      $('.product').sort(function(a, b) {
        var valueA = $(a).find('.'+rel).text();
        var valueB = $(b).find('.'+rel).text();
        if (valueA < valueB) {
          return 1;
        } else {
          return -1;
        }
      })
    );
  });
  $('.name').on('click', function() {
    $(this).next('.detail').slideToggle();
  });
});

Answer 1

これでできませんか？

  $('.list').on('click', '.name', function() {
    $(this).next('.detail').slideToggle();
  });

Comments

[sunasuna123go]

お返事ありがとうございます！
お返事頂いた箇所の2行目が私の誤字であるのを発見し、質問を編集・修正いたしました。
.next('.result') → .next('.detail')

修正したコードで試してみましたが、依然表示されませんでした。

[kei344]

https://jsfiddle.net/5x80dyn6/

[sunasuna123go]

再度、お返事頂きましてありがとうございます！

コメント頂いたjsFiddleを参考に追加で修正したら、同様にコードが動作しました！
問題点が解決できて、とても嬉しいです。
お時間頂きありがとうございます、大変感謝しております。

Answer 2

htmlをソートするのはどうかと思います
jQueryオブジェクトを配列に入れてソートしてみては？

Comments

[yambejp]

$('.sort ul li').on('click', function() {
var rel = $(this).attr('rel');
$('.list').append($('.list .product').get().sort(function(a, b){
var valueA = $(a).find('.'+rel).text();
var valueB = $(b).find('.'+rel).text();
if (valueA < valueB) {
return 1;
} else if (valueA < valueB) {
return -1;
} else {
return 0;
}
}));
});