I have events for 'submit' on a form. In IE8, if I submit the form without entering any information, just simply click the submit button, it posts the form and it's never caught or handled by the defined event in Backbone. However, if I simply click on an input field, then hit submit the event is handled.

The backbone event is setup like this:

events: {

'submit #form': 'submitForm',

        },
submitForm: function(e){
     e.preventDefault();
}

Any ideas why this would be?

Update: Here's an example of form:

<div id="form">
  <form action="/action" method="post">
  <input type="text" name="name" />
  <button type="submit" value="Submit"></button>
  </form>
</div>

It's literally only in IE8 and ONLY if you don't first click an element within the form, before submitting. The event is triggered in FF, Chrome, IE9+ without a problem. But only in IE8, if you just click submit, without doing anything else, the event doesn't get triggered.

I have events for 'submit' on a form. In IE8, if I submit the form without entering any information, just simply click the submit button, it posts the form and it's never caught or handled by the defined event in Backbone. However, if I simply click on an input field, then hit submit the event is handled.

The backbone event is setup like this:

events: {

'submit #form': 'submitForm',

        },
submitForm: function(e){
     e.preventDefault();
}

Any ideas why this would be?

Update: Here's an example of form:

<div id="form">
  <form action="/action" method="post">
  <input type="text" name="name" />
  <button type="submit" value="Submit"></button>
  </form>
</div>

It's literally only in IE8 and ONLY if you don't first click an element within the form, before submitting. The event is triggered in FF, Chrome, IE9+ without a problem. But only in IE8, if you just click submit, without doing anything else, the event doesn't get triggered.

• javascript
• internet-explorer
• backbone.js
• underscore.js

Share Improve this question Follow edited Jul 21, 2012 at 18:10 dzm asked Jul 20, 2012 at 23:36 dzmdzm 23.6k5151 gold badges152152 silver badges229229 bronze badges 6

• is this a submit button or just a button ? submit button does a post to the form action attribute. Also is #form inside this.$el in the view? do this inside render method console.log(this.$el.find("#form")) check that console has the jquery object logged – Deeptechtons Commented Jul 21, 2012 at 5:37
• Yeah - we need more information, like the HTML that the view is representing – Stephen Commented Jul 21, 2012 at 6:52
• You might also need to add e.stopPropagation();. – ebohlman Commented Jul 21, 2012 at 11:06
• Ok I added a little more info. @ebohlman Will try that – dzm Commented Jul 21, 2012 at 18:10
• If that doesn't work, create a page whose body contains only the form you showed (without bringing in any scripts) and just attach an ordinary JS onsubmit event to it that fires an alert or something like that. Then see if you get the same behavior: if so, then it's a bug in IE8 and not any of your code. – ebohlman Commented Jul 21, 2012 at 23:37

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

Some events can't be delegated using this method. 'focus' and 'blur' don't work, and in IE8 and lower 'change', 'submit' and 'reset' don't work either. It's actually in the annotated source of Backbone but for some reason not in the documentation.

JQuery's documentation actually states that the method that Backbone uses ($.delegate) is now superseded by $.on which is able to handle those kinds of events.

So your options are:

• overload Backbone.View.delegateEvents to use $.on instead of $.delegate
• manually bind the events as shown by EndangeredMassa.

I believe the problem here is that before IE9, submit events don't bubble up the DOM. In your example, you register the event on a div that contains the form that is submitted. You may need to specifically handle the submit event of the form after rendering instead of relying on backbone's events.

render: function(){
  // render content
  $el.find('form').on('submit', submitForm);
},

submitForm: function(){ ... }

I'm not sure why it would work if you put the cursor in an element of the form first, though.

You can attach those event properly with $.on for IE8 after the rendering

use this generic function in postRender:

fixIeBug = function(){
    if(!$.browser.msie || $.browser.version > 8){
        return;
    }

    var delegateEventSplitter = /^(\S+)\s*(.*)$/;

    var events = this.events;
    if($.isFunction(events)){
        events = events.apply(this);                
    }

    var handleEvents = ['change', 'submit', 'reset', 'focus', 'blur']

    for (var key in events) {
        var method = events[key];
        if (!_.isFunction(method)) method = this[events[key]];
        if (!method) throw new Error('Method "' + events[key] + '" does not exist');
        var match = key.match(delegateEventSplitter);
        var eventName = match[1], selector = match[2];

        if( _.indexOf(handleEvents, eventName) == -1){ continue; }

        method = _.bind(method, this);
        if (selector === '') {

        } else {                  
            var self = this;                     
            (function(eventName,method){
                //console.log('trying to set "on" handler for %s, key=%s', eventName, key);
                self.$(selector).on(eventName, function(e){                            
                    //console.log('got it, eventName=%s', eventName);                  
                    return method(e);
                })
            })(eventName,method);
        }
    }                
}

You have 'submit #form', but note that the form id attribute is on the containing <div id="form">, not the form itself. If you just use 'submit form' (grab any form element in your el), or you add an id to the <form> attribute and select it accordingly, you should get the expected behavior.

Unless, as noted, you are using IE < 9, in which case you cannot bind to change, submit, or reset events.