Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Archives
Today
Total
관리 메뉴

비바라기's

[JS] $(document).on은 되는데 $(”#id”).on은 안될 때 본문

TIL/기타

[JS] $(document).on은 되는데 $(”#id”).on은 안될 때

vivaragi 2022. 8. 28. 13:59
        <script>
            $(document).on('click',"#testButton", function(){
                alert("yup");
            })

            $("#testButton").on('click', function(){
                alert("yup")
            })
        </script>
        
        // -----
        
        <body>
        	<input type="button" id="testButton" value="test">
        </body>

 $(document).on을 사용한 방식과 $("#id').on을 사용한 방식은 둘 다 같은 것(#testButton)을 가리키고 있고, 의미도 동일하지만, 실제로 동작시켜보면 alert("yup")은 한 번만 발생합니다.이것은 $(document).on 방식은 document가 파싱된 뒤 id가 testButton인 노드를 찾아 함수를 실행시키지만, $('#id').on과 같은 방식은 document가 파싱되기 전에 id=#testButton인 <button>을 찾고 있으므로 그곳에 도달할 수 없어 함수를 실행시킬 수 없었기 때문입니다.

 

따라서 다음과 같이 수정하면 $('#id').on 방식을 사용할 수 있습니다. $(document).ready() 아래에 $('#id').on 코드를 넣는 식입니다.

    <script>
        $(document).on('click',"#testButton", function(){
            alert("yup");
        })    
        
        $(function(){
            $("#testButton").on('click', function(){
            alert("yup")
            })
        })
    </script>