2012-07-20 17 views
5

Ho eventi per "invio" su un modulo. In IE8, se invio il modulo senza inserire alcuna informazione, è sufficiente fare clic sul pulsante di invio, il modulo viene pubblicato e non viene mai rilevato o gestito dall'evento definito in Backbone. Tuttavia, se faccio semplicemente clic su un campo di input, quindi invio invio l'evento viene gestito.Gli eventi di Backbone.js non vengono riconosciuti in IE8

L'evento spina dorsale è configurato in questo modo:

events: { 

'submit #form': 'submitForm', 

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

Tutte le idee perché questo sarebbe?

Aggiornamento: Ecco un esempio di forma:

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

È letteralmente solo in IE8 e solo se prima non fa clic su un elemento all'interno del modulo, prima di inviarlo. L'evento è attivato in FF, Chrome, IE9 + senza problemi. Ma solo in IE8, se fai semplicemente clic su Invia, senza fare altro, l'evento non viene attivato.

+0

è un pulsante di invio o solo un pulsante?pulsante di invio invia un post all'attributo action form. Inoltre è '# form' all'interno di' this. $ El' nella vista? fai questo all'interno del metodo di rendering 'console.log (this. $ el.find (" # form "))' verifica che la console abbia registrato l'oggetto jquery – Deeptechtons

+0

Sì - abbiamo bisogno di maggiori informazioni, come l'HTML che la vista sta rappresentando – Stephen

+0

You potrebbe anche essere necessario aggiungere 'e.stopPropagation();'. – ebohlman

risposta

0

Credo che il problema qui sia quello prima di IE9, submit events don't bubble up the DOM. Nel tuo esempio, registri l'evento su un div che contiene il modulo inviato. Potrebbe essere necessario gestire in modo specifico l'evento di invio del modulo dopo il rendering anziché fare affidamento sugli eventi di backbone.

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

submitForm: function(){ ... } 

Non sono sicuro del motivo per cui funzionerebbe se si posizionasse prima il cursore in un elemento del modulo.

2

Alcuni eventi non possono essere delegati utilizzando questo metodo. 'focus' e 'blur' non funzionano, e in IE8 e in basso 'change', 'submit' e 'reset' non funzionano neanche. In realtà è nello annotated source of Backbone ma per qualche motivo non in the documentation.

La documentazione di JQuery dichiara effettivamente che il metodo utilizzato da Backbone ($.delegate) è stato sostituito da $.on che è in grado di gestire tali tipi di eventi.

Quindi le opzioni sono: Backbone.View.delegateEvents

  • sovraccarico di utilizzare $ .on invece di $ .delegate
  • manualmente legare gli eventi come mostrato da EndangeredMassa.
+2

! backbone.js (v1.0.0) usa già $ .on() all'interno del metodo Backbone.View.delegateEvents() (vedi http://backbonejs.org/docs/backbone.html#section-130) -> quindi questo non è un'opzione più! – OviC

0

È possibile allegare quelli evento correttamente con $ .on per IE8 dopo il rendering di

uso questa funzione generica 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); 
     } 
    }     
} 
0

Hai 'submit #form', ma nota che l'attributo id form è sul contenente <div id="form">, non sul modulo stesso. Se usi semplicemente 'submit form' (prendi qualsiasi elemento del modulo nel tuo el), o aggiungi un ID all'attributo <form> e lo selezioni di conseguenza, dovresti ottenere il comportamento previsto.

A meno che, as noted, si utilizza IE < 9, nel qual caso non è possibile associare a change, submit o reset eventi.

Problemi correlati