jquery - slideToggle div onclick，带有 div 排序选项

Question

我在我的网站上开发了一种使用各种排序选项对 div (.ligne) 进行排序的方法。按名称、日期、状态和类型排序。我有一个运行良好的 jquery 代码，我需要更多地使用它来减轻它的负担，但它确实有效。

每个div都有一个children div，当点击div时，children div slidetoglle。也可以正常工作。

我没有使用任何插件，只使用 bootstrap css。

但是当我点击对我的 div 进行排序时，子 div 的滑动开关就不再起作用了。无法找出它来自哪里...

例如，当您第一次加载页面时，尝试点击“AGDE CAPE HOTEL”，div 会自动打开。但是一旦你点击一个箭头来对内容进行排序，它就不再起作用了......

这是我的 HTML:

<div class="container titre">

  <div class="row">

  <div class="col-xs-3 text-right">

  <div class="title">PROJECT</div>

    <span id="nom_ASC" class="sort">&#8595;</span> <span id="nom_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">YEAR</div><span id="annee_ASC" class="sort">&#8595; </span> <span id="annee_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">STATUS</div><span id="statut_ASC" class="sort">&#8595;</span> <span id="statut_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">TYPE</div><span id="type_ASC" class="sort">&#8595;</span> <span id="type_DSC" class="sort">&#8593;</span>

  </div>

  </div>

</div>

<div id="index" class="container">

  <div class="row ligne">

    <div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">WORK</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
    <div class="col-xs-3 annee">2015</div> 
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">MOVE</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
    <div class="col-xs-3 annee">2016</div> 
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEARN</div> 

  </div>

</div>

我的 CSS :

body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}
.sort {cursor:pointer}

用于排序的 Jquery :

var $divs = $("div.row.ligne");

/* VILLE */

$('#nom_ASC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".nom").text() > $(b).find(".nom").text();
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

$('#nom_DSC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".nom").text() > $(b).find(".nom").text());
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

/* ANNEE */

$('#annee_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".annee").text() > $(b).find(".annee").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#annee_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".annee").text() > $(b).find(".annee").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* STATUT */

$('#statut_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".statut").text() > $(b).find(".statut").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#statut_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".statut").text() > $(b).find(".statut").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* TYPE */

$('#type_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".type").text() > $(b).find(".type").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#type_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".type").text() > $(b).find(".type").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

和打开 div 的 Jquery (slideToggle)

  $('.ligne').click(function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

这里有一个 jsfiddle 可以看到它的实际效果: http://jsfiddle.net/C2heg/726/

谢谢，

Answer 1

$('body').on('click', '.ligne', function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

Working Demo

看看Event binding on dynamically created elements?