jQuery: 对 div 的内容进行排序后隐藏功能中断

Question

我找到了一些 jQuery 代码，可以根据内容按数字或字母顺序对 div 进行排序。最重要的是，我添加了一个函数来隐藏 div，绑定到点击侦听器。隐藏 divs 工作得很好，排序 divs 工作得很好。但是，如果我先对 div 进行排序，然后尝试隐藏它们，那是行不通的。它们很好，只是无法隐藏。没有错误代码，什么都没有。

您可以在此处查看示例：

<div class="wrap">
<button id="alphBnt">Alphabetical</button>
<button id="numBnt">Numerical</button>
<div id="container">
  <div class="box">
    <button>Hide</button>
    <h1>B<h1>
    <h2>10.35</h2>  
  </div>

  <div class="box">
    <button>Hide</button>
    <h1>A<h1>
    <h2>100.05</h2>
  </div>    
</div>

var $divs = $("div.box");

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

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

$(".box button").on('click', function () {
    console.log($(this).parent());
    $(this).parent().hide();
});

https://jsfiddle.net/C2heg/2031/

谢谢。

Answer 1

因为您必须在点击函数中附加隐藏事件

var $divs = $("div.box");

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

    $(".box button").on('click', function () {
        console.log($(this).parent());
        $(this).parent().hide();
    });
});

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

    $(".box button").on('click', function () {
        console.log($(this).parent());
        $(this).parent().hide();
    });
});

jQuery: 对 div 的内容进行排序后隐藏功能中断

jQuery: Hide function breaks after sorting content of divs

html

sorting

jquery

hide