Các biến bài đăng không được đặt khi gửi biểu mẫu với JS

Question

Tôi có biểu mẫu tôi gửi cùng với javascript ngay khi người dùng nhấp vào nhãn. Có một hành vi lạ khi dữ liệu không được đăng. Nhưng nếu tôi gửi mẫu với một sự chậm trễ (ngay cả với một sự chậm trễ của 0) nó hoạt động.

Đây là html:

<form action="/other-page" method="post"> 
    <input id="val-1" type="checkbox" name="filter[]" value="1"> 
    <label for="val-1">Value 1</label> 

    <input id="val-2" type="checkbox" name="filter[]" value="2"> 
    <label for="val-2">Value 2</label> 
</form> 

Kịch bản:

<script> 
    $('label').click(function() { 
     var form = $(this).closest('form') 

     // if I use the following line the values won't be set 
     form.submit() 

     // If I use a `setTimeout` it works, even with a delay of 0 
     setTimeout(function() { 
      form.submit() 
     }, 0) 
    }) 
</script> 

Nó không phải là một vấn đề lớn như tôi có thể làm công việc này với setTimeout nhưng văn bản này với một sự chậm trễ từ 0 thực sự là xấu xí. Tôi nghĩ về một lỗi trình duyệt nhưng tôi đã thử nghiệm với Chrome và Firefox và tôi có kết quả tương tự.

Bất kỳ ý tưởng nào về những gì đang xảy ra?

Answer 1

Điều này là do bạn đang nghe nhấp chuột vào nhãn. Hãy thử nghe để nhấp vào hộp kiểm.

$('input[type=checkbox]').click(function() { 
    $(this).closest('form').submit(); 
}); 

Nhấp vào nhãn có nghĩa là trình duyệt sẽ "nhấp" phần tử được liên kết. Và vì bạn đang gửi biểu mẫu trên nhấp chuột vào nhãn, nó sẽ không cung cấp cho trình duyệt cơ hội để làm điều này.

Tại sao setTimeout với 0 không hoạt động, bởi vì đây là một mẹo để thực hiện việc gửi cho đến khi trình duyệt được thực hiện với các hành động hiện tại của nó. Bạn có thể tìm thêm thông tin về điều này tại Why is setTimeout(fn, 0) sometimes useful?

Answer 2

Ai đó (tôi không thể nhớ tên người dùng của anh ấy) đã đăng giải pháp, nhưng đã bị bỏ phiếu để anh ấy xóa câu trả lời. Nhưng giải pháp của ông đã đúng như vậy ở đây nó là:

Tất cả tôi cần làm là sử dụng sự kiện click vào đầu vào thay vì nhãn

$('input[type=checkbox]').click(function() { 
     $(this).closest('form').submit() 
})