jQuery .on事件处理程序不一致地从锚元素'click'触发

Question

我最近开发了一个网站http://www.bandwidthpool.com，一个带宽出价网站。我使用动态页面加载来获得更流畅的体验，但最近发现了一些问题。导航链接和按钮都是元素。我多次注意到你必须多次点击链接/按钮两次以使其触发点击事件。似乎没有押韵或理由，我无法弄清楚这种行为背后的任何模式或推理。

我设置了一个测试页面，以便更好地说明这一点：

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