CODEWITHSUNDEEP
javascriptfirefoxeventsbackbone.js
James Owen
James Owen

Reputation: 256

Backbone click event not working correctly in firefox

This code executes perfectly in safari and chrome but has problems with Firefox.

Basically, I have a group of radio buttons. This click event should only be fired if the radio button has an attribute of checked. However for some reason, the radio button in firefox seems to fire the event even when the radio-button is not checked.

var MyView = Backbone.View.extend({

    events: {
        'click input[type="radio"]:checked' : 'radioListener',
    },

     radioListener : function(evt) {
         var selectedObject =  evt.currentTarget;
         $(selectedObject).prop('checked', false);
         $(selectedObject).val('');
         $(selectedObject).change(this.clearSelection(evt));
    }

 });

Upvotes: 0

Views: 614

Answers (1)

hindmost
hindmost

Reputation: 7195

You have wrong understanding of how event binding works.

When you bind event listener to DOM element, jQuery selector (input[type="radio"]:checked in your case) you provide is used to specify DOM element during event binding, not event firing (triggering). This mean that in your example click event is fired on the selected radio buttons regardless of whether they checked at clicking moment.

So you have to filter your radio buttons inside event listener. Something like this:

var MyView = Backbone.View.extend({

    events: {
        'click input[type="radio"]' : 'radioListener',
    },

    radioListener : function(evt) {
        var selectedObject =  evt.currentTarget;
        if (selectedObject.is(':checked')) {
            $(selectedObject).prop('checked', false);
            $(selectedObject).val('');
            $(selectedObject).change(this.clearSelection(evt));
        }
    }

});

Upvotes: 1

Related Questions