IE8でBackbone.jsイベントが認識されない

Question

フォームに「submit」イベントがあります。 IE8では、情報を入力せずにフォームを送信するだけで、送信ボタンをクリックするだけでフォームがポストされ、バックボーンで定義されたイベントによって捕捉されたり処理されたりすることはありません。しかし、単に入力フィールドをクリックしてからsubmitを押すと、イベントが処理されます。

events: { 

'submit #form': 'submitForm', 

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

すべてのアイデア、なぜこれが次のようになります。

バックボーンイベントは、このような設定ですか？

アップデート：ここではフォームの例です：

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

それが唯一のIE8で文字通りだとあなたが最初に提出する前に、フォーム内の要素をクリックしない場合に限ります。イベントはFF、Chrome、IE9 +で問題なく起動されます。しかし、IE8でのみ、他に何もせずにサブミットをクリックすると、イベントはトリガされません。

Answer 1

ここでの問題は、IE9以前は、submit events don't bubble up the DOMです。あなたの例では、送信されたフォームを含むdivにイベントを登録します。バックボーンのイベントに頼るのではなく、レンダリング後にフォームのサブミットイベントを特別に処理する必要があるかもしれません。

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

submitForm: function(){ ... } 

でも、私はあなたが最初のフォームの要素にカーソルを置く場合、それがうまくいく理由はわかりません。

Answer 2

一部のイベントは、このメソッドを使用して委任することはできません。 'focus'と 'blur'は機能しません。IE8以降では 'submit'と 'reset'のどちらも機能しません。実際にはannotated source of Backboneにありますが、なんらかの理由でthe documentationにはありません。

JQueryのドキュメントには、実際には、Backboneが使用するメソッド（$.delegate）が、これらの種類のイベントを処理できる$.onによって置き換えられていることが記載されています。

だからあなたのオプションは次のとおりです。

• 過負荷Backbone.View.delegateEventsはEndangeredMassaによって示されるように、手動でイベントをバインド$ .delegate
• の代わりに$ .onを使用します。

Answer 3

あなたはpostRenderでレンダリング

使用この汎用的な機能を後にIE8のための$ .onで適切にそれらのイベントを添付することができます：form id属性という

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

Answer 4

あなたは'submit #form'を持っていますが、注意してくださいフォーム自体ではなく、<div id="form">が含まれています。 'submit form'（elのフォーム要素を取得）だけを使用するか、または<form>属性にIDを追加し、それに応じてIDを追加すると、予想される動作が得られます。

as noted、いない限り、あなたはchange、submit、またはresetイベントにバインドすることはできません、その場合にはIE < 9を使用しています。