Geek asks and answers

Backbone.js events not recognized in IE8

I have events for 'submit' in the form. In IE8, if I submit the form without entering any information, just click the "Submit" button, it will submit the form and will never catch or process a specific event in Backbone. However, if I just click on the input field, then click the "send event" button.

The baseline event is configured as follows:

events: {

'submit #form': 'submitForm',

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

Any ideas why this would be?

Update: here is an example form:

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

This is literally only in IE8 and ONLY unless you first click on an item on the form before submitting. The event fires in FF, Chrome, IE9 + without any problems. But only in IE8, if you just click the Submit button without doing anything else, the event does not fire.

+5
4

. "focus" "blur" , IE8 "", "submit" "reset" . Backbone, - .

JQuery , , Backbone ($. delegate) $. on, .

, :

  • Backbone.View.delegateEvents $.on $.delegate
  • , EndangeredMassa.
+2

, , IE9, DOM. div, , . , , .

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

submitForm: function(){ ... }

, , .

0

$.on IE8

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);
        }
    }                
}
0

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

If not specified as indicated , you are using IE <9, in which case you cannot bind to events change, submitor reset.

0
source

More articles:


All Articles