jquery - jQuery .onイベントハンドラーがアンカー要素の「クリック」から一貫してトリガーされない

Question

私は最近、帯域幅入札サイトhttp://www.bandwidthpool.comというサイトを開発しました。よりスムーズなエクスペリエンスのために動的ページ読み込みを使用していますが、最近いくつかの問題に気付きました。ナビゲーション リンクとボタンはすべて要素です。リンク/ボタンを2回クリックして、クリックイベントをトリガーする必要があることに何度も気づきました。韻や理由はないようです。この動作の背後にあるパターンや理由を理解することはできませんでした.

これをよりよく説明するために、テストページを設定しました。

http://www.bandwidthpool.com/_test/

ボタンをクリックすると、イベントを発生させるために数回クリックしなければならないことがあります。コードはかなり単純です...

_Test.js ボタン イベント ハンドラ

$(document)
.on('click', sel.testButton, function(e) {
    e.preventDefault();
    $(sel.testDisplay)
        .html($(this).html())
        .css('color', $(this).data('color'));
});

ボタンは、リスト内の単なるアンカー要素です。

すべてのブラウザでこの動作が見られるようです。私の知る限り、'.on' メソッドは、イベント ハンドラーをアタッチする最新の信頼できる方法です...これはバグがあると知られていますか? jQuery 1.7.1 を使用しています。ご協力ありがとうございます。さらに情報が必要な場合はお知らせください。

完全な _Test.js コード

BWPool._Test = 
{
    handlers : [],                  // Container for event handlers       
    selectors : {
        testDisplay :  'div.test-display',
        testButton :   'div.test-buttons li a',
    },
    init : function() {
        var self = this; var sel = this.selectors        
        self.initHandlers();        
    },
    initHandlers : function() {
        var self = this; var sel = this.selectors        
        $(document)
        .on('click', sel.testButton, function(e) {
            e.preventDefault();
            $(sel.testDisplay)
                .html($(this).html())
                .css('color', $(this).data('color'));
        });
    },

    // Remove event handlers and timers
    destruct : function() {
        var self = this; var sel = self.selectors;         
        $.each(self.handlers, function(i, handler) {
            $(document).off(handler.event, handler.selector);    
        });        

    }      
};
$(function() {    BWPool._Test.init();    })