html chênh lệch trình dạng giữa click(), trình() và bằng tay nhấp chuột trong jquery

Question

Tôi có một trang jsp như sau:

<script type="text/javascript" src="/mywebapp/js/jquery.js"></script> 
<script type="text/javascript">   
$(function() { 
    $('#testform').submit(function(){ 
    alert('now starting submit'); 
    return true; 
    }); 

    $("#test1btn").click(function(){ 
    $('#testform #submit').click();  
    }); 
    $("#test2btn").click(function(){ 
    $('#testform').submit();  
    }); 
});  
</script> 
<form id="testform" method="post" action="backend/search_test.do"> 
<input id="reqpagenr" name="reqpagenr" size="10"> 
<input type="button" id="test1btn" value="TestClick"/> 
<input type="button" id="test2btn" value="TestSubmit"/> 
<input id="submit" type="submit" value="Go"> 
</form> 

Khi tôi bằng tay bấm (tức là sử dụng một con chuột) vào nút "Go" , biểu mẫu được gửi sau khi hiển thị văn bản "hiện đang bắt đầu gửi"; khi nhấp vào nút "TestClick", biểu mẫu được gửi thành công nhưng văn bản "hiện đang bắt đầu gửi" không xuất hiện; khi nhấp vào nút "TestSubmit", văn bản "now starting submit" xuất hiện, nhưng biểu mẫu sẽ không được gửi.

Trái với yêu cầu của tôi, các nút "TestClick" và "TestSubmit" không hoạt động như nút "Go" khi cả hai được nhấp. Theo hiểu biết của tôi, ba lần nhấp vào nút phải thực hiện tương tự, nghĩa là gửi biểu mẫu sau khi văn bản "hiện đang bắt đầu gửi" xuất hiện. Vì vậy, câu hỏi của tôi là, tại sao kết quả của ba lần nhấp nút là khác nhau?

Tôi đang sử dụng jquery 1.3.2

Answer 1

Nút thứ hai không gửi biểu mẫu do một lỗi trong jQuery (hoặc DOM) gây phương pháp submit thất bại nếu nộp id nút của là 'gửi'. Xem: http://bugs.jquery.com/ticket/1414

Answer 2

Dường như xử lý sự kiện jQuery nộp là nhận được bỏ qua khi tự thiết lập các hình thức nộp qua $ ('# testform') nộp().

này nên hoạt động trong xử lý nhấp chuột:

$('#testform').trigger("submit") 

Answer 3

CẬP NHẬT:

• DEMO:http://aseptik.net/demo/html-form-submission-difference-between-click-submit-and-manual-click-in-jqu/

1. thực sự như richardml cho biết vấn đề đầu tiên mà bạn có là một Bug jQuery vì vậy đầu tiên là đổi tên id của việc gửi đến một cái gì đó khác.

2. Vấn đề thứ hai là type của test1btninput rằng nên type="submit" để cư xử giống như một nút gửi bình thường.

Bí quyết là để thay đổi kiểu trên di chuột, do đó mã sẽ trông như thế này:

$(function() { 
    $('#testform').submit(function() { 
     alert('now starting submit'); 
    }); 
    //TestClick 
    $('#test1btn').hover(function() { 
     $(this)[0].setAttribute('type', 'submit'); 
    },function() { 
     $(this)[0].setAttribute('type', 'button'); 
    }); 
    //TestSubmit 
    $('#test2btn').click(function() { 
     $('#testform').submit(); 
    }); 
}); 

Phần còn lại đang làm việc như mong đợi.

hy vọng trợ giúp này

Answer 4

bạn nên sử dụng sự kiện onsubmit để kích hoạt hàm thay thế.

<form id="testform" method="post" onsubmit="foo()" action="backend/search_test.do"> 

điều này sẽ kích hoạt foo() bất cứ khi nào bạn gửi biểu mẫu cho dù bằng cách sử dụng nút gửi hoặc phương thức submit().