Question

我发现了一些jQuery代码，可以根据内容按数字或字母顺序对div进行排序。除此之外，我添加了一个函数，可以隐藏div，绑定到单击侦听器。隐藏div工作得很好，排序div工作得很好。但是，如果我先对div进行排序，然后我尝试隐藏它们，它就不起作用了。他们排序很好，他们只是无法隐藏。没有错误代码，没有。

您可以在此处查看示例：

a = {'a':5, 'b':3, 'c':1}
b = {"ca":10, "sd":4, "aa":2}

print {a.keys()[i]:b.keys()[i] for i in range(len(a.keys()))}

<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>

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的内容进行排序后隐藏函数中断

1 个答案: