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

无法使用此方法委托某些事件。'focus' 和 'blur' 不起作用，并且在 IE8 和更低版本的 'change'、'submit' 和 'reset' 也不起作用。它实际上在Backbone 的注释源中，但由于某种原因不在文档中。

JQuery 的文档实际上指出，Backbone 使用的方法（$.delegate）现在被能够处理这些事件的$.on所取代。

所以你的选择是：

  • 重载 Backbone.View.delegateEvents 以使用 $.on 而不是 $.delegate
  • 如 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

您可以在渲染后使用 $.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);
        }
    }                
}
于 2012-08-20T22:12:22.203 回答
0

您有'submit #form'，但请注意formid 属性位于包含<div id="form">，而不是表单本身。如果您只是使用'submit form'（在您的 中获取任何表单元素el），或者您向<form>属性添加一个 id 并相应地选择它，您应该得到预期的行为。

除非，如前所述，您使用的是 IE < 9，在这种情况下，您不能绑定到change、submit或reset事件。

于 2013-03-05T22:07:58.743 回答