5

フォームに「送信」するためのイベントがあります。IE8 では、情報を入力せずにフォームを送信すると、送信ボタンをクリックするだけでフォームが投稿され、Backbone で定義されたイベントによってキャッチまたは処理されることはありません。ただし、入力フィールドをクリックするだけで、送信を押してイベントが処理されます。

バックボーン イベントは次のように設定されます。

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 でのみ、他に何もせずに [送信] をクリックしただけでは、イベントはトリガーされません。

4

4 に答える 4

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.
于 2012-08-09T03:49:57.010 に答える
0

ここでの問題は、IE9より前の送信イベントがDOMをバブルアップしないことだと思います。あなたの例では、送信されたフォームを含むdivにイベントを登録します。バックボーンのイベントに依存するのではなく、レンダリング後にフォームの送信イベントを具体的に処理する必要がある場合があります。

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

submitForm: function(){ ... }

ただし、最初にフォームの要素にカーソルを置くと、なぜそれが機能するのかわかりません。

于 2012-07-29T03:51:15.363 に答える
0

レンダリング後に IE8 の $.on でこれらのイベントを適切にアタッチできます。

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);
        }
    }                
}
于 2012-08-20T22:12:22.203 に答える
0

がありますが、 id 属性はフォーム自体ではなく、含まれて'submit #form'いる にあることに注意してください。(フォーム内の任意のフォーム要素を使用する) を使用するか、属性に id を追加してそれに応じて選択すると、期待どおりの動作が得られます。 form<div id="form">'submit form'el<form>

前述のようchangeに、IE < 9 を使用している場合を除きます。この場合、、、、submitまたはresetイベント にバインドできません。

于 2013-03-05T22:07:58.743 に答える