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);
})

interval を 10000 に変更すると、すべて正常に動作します。

しかし、私は約100以下の間隔が必要です。

Answer 1

フィドルを変更して比較しました。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);
})

Answer 2

私があなたの問題を正しく理解していれば、特定の間隔で繰り返しソートする必要はありません。要素がクリックされたときに sort-function を呼び出すだけです。（現在の alert() の呼び出しはどこにありますか）