我怎么能有一个动态分配的DOM事件火以及骨干事件

Question

我想有一个加载器附加在我的按钮在每个页面的鼠标向下

我有一个函数，在布局渲染后触发并传入顶层视图，然后捕获每个按钮并在其上附加一个mousedown事件:

attachGlobalButtonEventHandler : function(view){
        view.$el.find('button.viewtag, button.newtag').on('mousedown', function(){
            var $target = $(this);
            $target.addClass('activated');
            $target.prop('disabled', true);
        });
    }

这工作得很好，但问题是我的骨干事件上的按钮没有被触发，它看起来像:

events : {
            'click .newtag' : 'gotoCreate'
        },
        gotoCreate : function(evt) {
            evt.preventDefault();
            app.router.navigate('somewhere', true);
        }

如果我删除了attachGlobalButtonEventHandler，那么点击newtag会很好地触发，但如果附加了处理程序，则根本不会触发。我怎么能确保骨干点击事件将火，以及?

Answer 1

这里的问题是disabled属性和事件执行的顺序。

mousedown事件发生在click事件之前，在mousedown回调中禁用按钮，从而完全删除click事件。

查看这个jsFiddle。如果注释掉$(this).prop('disabled', true);行，则会触发click事件。

通过添加setTimeout，您可以在下一个tick时有效地执行它，详细信息请参阅此jsFiddle。

编辑:我刚刚注意到@codemonkey添加了一个评论，建议同样的事情