1

我最近开发了一个站点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();    })
4

0 回答 0