javascript - 如何在不失去可点击性的情况下重复对div中的元素进行排序？

Question

我需要的例子:

http://jsfiddle.net/bbGMB/1/

var interval = 100;
$(function(){
    $('#container').children().click(function(e){
        alert($(e.target).text()+" clicked");
    });
    setInterval(function(){
        $('#container').children().sort(function(a,b){
            if($(a).text() > $(b).text()) return 1;
            if($(a).text() < $(b).text()) return -1;
            return 0;
        }).appendTo('#container');
    },interval);
})

如果我们将间隔更改为 10000，一切正常。

但我需要大约 100 或更低的间隔。

Answer 1

修改了你的 fiddle 以进行比较。请查看http://jsfiddle.net/bbGMB/4/

var interval = 100;
$(function(){
    $('#container').children().click(function(e){
        alert($(e.target).text()+" clicked");
    });
    setInterval(function(){
        var origC = $('#container').children(); 
        var newC  = $.extend([], origC);

            newC.sort(function(a,b) {
            if($(a).text() > $(b).text()) return 1;
            if($(a).text() < $(b).text()) return -1;
            return 0;
        });
        for (var i=0; i < origC.length; i++) {
            if (origC[i] !== newC[i]) {
                newC.appendTo('#container');
                break;
            }
        }

    },interval);
})