JS로 양식을 제출할 때 변수가 게시되지 않음

Question

사용자가 라벨을 클릭하자마자 javascript로 제출하는 양식이 있습니다. 데이터가 게시되지 않는 이상한 행동이 있습니다. 하지만 지연을 사용하여 양식을 제출하면 (심지어 지연 0도) 작동합니다. 여기

는 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> 

스크립트 :

<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> 

나는 setTimeout와 함께이 일을하지만 0의 지연이 글을 쓰는 것은 정말 수 그것은 큰 문제가 아니다 추한. 브라우저 버그에 대해 생각했지만 크롬과 파이어 폭스로 테스트 한 결과 동일한 결과를 얻었습니다.

무슨 일이 일어나고 있는지 알고 싶습니다.

Answer 1

레이블 클릭을 듣고 있기 때문입니다. 체크 박스 클릭을 듣습니다.

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

레이블을 클릭하면 브라우저가 관련 요소를 "클릭"한다는 의미입니다. 그리고 라벨 클릭으로 양식을 제출하기 때문에 브라우저가이 작업을 수행 할 기회가 없습니다.

setTimeout이 0으로 설정된 이유는 브라우저가 현재 작업으로 끝날 때까지 실행을 게시하는 트릭이기 때문입니다. 이것에 대한 자세한 정보는 Why is setTimeout(fn, 0) sometimes useful?

Answer 2

누군가 찾을 수 있습니다 (그의 사용자 이름은 기억이 나지 않습니다). 해결책을 게시했으나 downvoted가있어 답변을 삭제했습니다. 그러나 그의 해결책은 바로 지금 여기있다되었습니다

내가 할 필요가 대신 라벨

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