Sự kiện Backbone.js không được nhận dạng trong IE8

Question

Tôi có các sự kiện để 'gửi' trên biểu mẫu. Trong IE8, nếu tôi gửi biểu mẫu mà không cần nhập bất kỳ thông tin nào, chỉ cần nhấp vào nút gửi, nó sẽ gửi biểu mẫu và không bao giờ bị bắt hoặc xử lý bởi sự kiện được xác định trong Backbone. Tuy nhiên, nếu tôi chỉ cần nhấp vào trường nhập, sau đó nhấn gửi sự kiện được xử lý.

Sự kiện xương sống được thiết lập như thế này:

events: { 

'submit #form': 'submitForm', 

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

ý tưởng Bất kỳ lý do tại sao này sẽ là gì?

Cập nhật: Dưới đây là một ví dụ về hình thức:

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

Đó là nghĩa đen chỉ trong IE8 và ONLY nếu bạn không đầu nhấp một yếu tố trong biểu mẫu, trước khi nộp. Sự kiện này được kích hoạt trong FF, Chrome, IE9 + mà không có vấn đề gì. Nhưng chỉ trong IE8, nếu bạn chỉ cần nhấp vào gửi, mà không làm bất cứ điều gì khác, sự kiện này không được kích hoạt.

Answer 1

Tôi tin rằng vấn đề ở đây là trước IE9, submit events don't bubble up the DOM. Trong ví dụ của bạn, bạn đăng ký sự kiện trên div chứa biểu mẫu được gửi. Bạn có thể cần phải xử lý cụ thể sự kiện gửi biểu mẫu sau khi hiển thị thay vì dựa vào các sự kiện của xương sống.

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

submitForm: function(){ ... } 

Tôi không chắc chắn lý do tại sao nó sẽ hoạt động nếu bạn đặt con trỏ vào phần tử của biểu mẫu trước tiên.

Answer 2

Một số sự kiện không thể được ủy quyền bằng phương pháp này. 'focus' và 'blur' không hoạt động, và trong IE8 và 'thay đổi' thấp hơn, 'submit' và 'reset' cũng không hoạt động. Nó thực sự ở số annotated source of Backbone nhưng vì một lý do nào đó không phải trong the documentation.

Tài liệu của JQuery thực sự nói rằng phương pháp mà Backbone sử dụng ($.delegate) hiện được thay thế bởi $.on có thể xử lý các loại sự kiện đó.

Vì vậy, lựa chọn của bạn là: Backbone.View.delegateEvents

• quá tải sử dụng .Trên $ thay vì $ .delegate
• tự ràng buộc các sự kiện thể hiện qua EndangeredMassa.

Answer 3

Bạn có thể đính kèm những sự kiện đúng với $ .Trên cho IE8 sau khi render

sử dụng chức năng chung này trong 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); 
     } 
    }     
} 

Answer 4

Bạn có 'submit #form', nhưng lưu ý rằng thuộc tính id form nằm trên chứa <div id="form">, không phải là biểu mẫu. Nếu bạn chỉ sử dụng 'submit form' (lấy bất kỳ phần tử biểu mẫu nào trong số el) hoặc bạn thêm id vào thuộc tính <form> và chọn nó cho phù hợp, bạn sẽ nhận được hành vi mong đợi.

Trừ khi, as noted, bạn đang sử dụng trình duyệt IE < 9, trong trường hợp bạn không thể liên kết với change, submit, hoặc reset sự kiện.