Webkit browsers: click event handler doe not work properly

Question

The 'click' event is triggered for button 'Select All items' in my interface. This click event fires an action to highlight all items with red background.

It works fine in Firefox, Opera, IE, but not in Safari and Chrome. In these webkit browsers the red background appears not after clicking 'Select All' button. There is a need to hover item after button clicking for backround appears.

Can you suggest any solution?

There is my piece of js code:

events: {
        'click .select-all-btn': 'selectAll'
    },
selectAll: function() {
        this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked');
    },

And an appropriate css:

.node-to-delete-checked .node-select
{
    display: block;
    background-color: rgba(121, 0, 0, 0.25);
}

.node-to-delete-unchecked .node-select
{
    display: none;
}

Answer 1

It's a very useful article: http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

There is need in a force redraw for webkit browsers (Safari, Chrome). In the described situation a 'click' event worked properly and changed an element class. But browsers didn't redraw it accordinaly to new css styles for a changed class.

There is a little trick to solve the problem:

element.style.webkitTransform = 'scale(1)';

and for my Backbone code it will be:

selectAll: function() {this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked').css('webkitTransform', 'scale(1)');}