2010-01-12 16 views
7

Tôi có một biểu mẫu có thuộc tính onsubmit. Tôi cần phải ràng buộc một sự kiện gửi mới và tôi cần một sự kiện này để được thực thi trước bất kỳ chức năng gửi hiện có nào.Có thể liên kết một hàm submit() trước bất kỳ trình gửi/gửi hiện có nào không?

Mã sau đây minh họa sự cố.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     jQuery(function($) { 
     // a plugin 
     $('form').submit(function() { 
      alert("Second"); 
     }); 
     // an other plugin 
     $('form').submit(function() { 
      alert("Third"); 
     }); 

     // this event must always be executed as first event 
     $('form').submit(function() { 
      alert("Always First"); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <form onsubmit="javascript:alert('Fourth');"> 
     <p> 
     <input type="submit"> 
     </p> 
    </form> 
    </body> 
</html> 

Nếu bạn thực thi tập lệnh, trước tiên bạn sẽ nhận được "Thứ hai", sau đó "Đầu tiên".

Có thể liên kết sự kiện gửi mới và chỉ định xem hàm có được gọi trước bất kỳ sự kiện hiện có nào không?

ràng buộc:

  • sự kiện hiện tại phải được bảo tồn.
  • tôi không thể loại bỏ các sự kiện hiện tại bởi vì nội dung của thuộc tính onsubmit chứa một logic khá phức tạp được viết bởi Rails
  • (gia tăng): sự kiện này nên luôn luôn được thực hiện trước khi bất kỳ sự kiện onsubmit và các sự kiện đã binded (có lẽ binded bởi một plugin khác)

Bất kỳ ý tưởng nào?

Trả lời

14

Các inline nộp cháy sự kiện đầu tiên, bạn có thể nhận được một tham chiếu đến nó, vô hiệu hóa những onsubmit thuộc tính trên các yếu tố form, và sau đó ràng buộc nộp sự kiện mới của bạn, chương trình này sẽ thực hiện của bạn nộp xử lý:

jQuery(function($) { 
    var form = $('form'), oldSubmit = form[0].onsubmit; 
    form[0].onsubmit = null; 

    $('form').submit(function() { 
     alert("First"); 
     oldSubmit.call(this); // preserve the context 
    }); 
    }); 

Lưu ý rằng tôi sử dụng phương pháp call để gọi trình điều khiển cũ của bạn, điều này là để giữ gìn this từ khóa bên trong chức năng đó, nó sẽ là form yếu tố riêng của mình.

Nếu onsubmit xử lý ban đầu của bạn có một số hành vi xác nhận, bạn có thể nhận giá trị trả về của mình bằng var ret = oldSubmit.call(this);

Kiểm tra ví dụ trên here.

+0

Giải pháp này hoạt động rất tốt. Tôi quên đề cập đến, các plugin khác có thể đã liên kết các sự kiện khác với cùng một biểu mẫu. Có thể liên kết sự kiện này trước bất kỳ sự kiện nào được gắn vào/gắn kết không? Tôi đã cố gắng sử dụng unbind/bind (cũng đọc việc thực hiện các chức năng clone) nhưng tôi không thể có được một giải pháp hợp lý. –

+0

Bạn có thể thử hàm die() vì nhiều plugin sử dụng live() để nắm bắt sự kiện gửi! http://api.jquery.com/live/ – xijo

3

Lấy bộ xử lý hiện tại submit và lưu trữ nó trong một biến.

Sau đó, trong trình xử lý mới của bạn, hãy gọi hàm đó mà bạn đã lưu trữ từ trình xử lý trước đó submit và gán lại trình xử lý mới cho người nghe.

Ví dụ:

jQuery(function($) { 

    $('form').submit(function() { 
     var first = this.onsubmit; 
     //... 
     first.call(this); 
    }); 
    }); 

... hoặc một cái gì đó như thế. : =)

+0

'unbind' sẽ không hoạt động để xóa trình xử lý sự kiện nội tuyến' onsubmit' và phương thức khởi tạo 'Hàm' không thể hoạt động trên một số trình duyệt vì nó dựa vào phương thức' Function.prototype.toString', (để chuyển đối số 'functionBody' thành String) phương thức này phụ thuộc vào việc thực hiện, tôi nghĩ là an toàn hơn để sử dụng các tham chiếu và tránh việc * evaling * thực hiện bởi hàm tạo' Function' – CMS

+2

Tôi xác nhận, unbind không hoạt động. –

0

Tôi nghĩ rằng this là một cách tốt hơn nếu nó hoạt động mà nó nên bởi vì OP đã chấp nhận nó.

Các vấn đề liên quan