jQuery에서 버튼 클릭 이벤트를 처리하는 방법은 무엇입니까?


128

jQuery에서 버튼을 가지고 이벤트를 처리해야합니다. 그리고이 코드를 작성하고 있지만 작동하지 않습니다. 내가 뭐 놓친 거 없니?

<!-- Begin Button -->  
<div class="demo">
<br> <br> <br>   
<input id = "btnSubmit" type="submit" value="Release"/>
<br> <br> <br>  
</div>
<!-- End Button -->

그리고 자바 스크립트 파일에서

function btnClick()
{
    //    button click
    $("#btnSubmit").button().click(function(){
        alert("button");
    });    
}

1
왜 둘러싼 btnClick함수에서 꺼내지 않겠습니까? 나는이 추가 것을 볼 수 없습니다
CodyBugstein

답변:


248

이벤트 핸들러를 $ (document) .ready () 이벤트에 넣어야합니다.

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
    }); 
});

25
$(document).ready(function(){

     $('your selector').bind("click",function(){
            // your statements;
     });

     // you can use the above or the one shown below

     $('your selector').click(function(e){
         e.preventDefault();
         // your statements;
     });


});

5
preventDefault ()를 삽입하는
유일한

12
jQuery 1.7부터이 .on()메소드는 이벤트 핸들러를 문서에 첨부하는 데 선호되는 메소드입니다. 그러므로 이것은 더 나을 것입니다 :$('your selector').on("click", ...);
Tinynumbers

11
$('#btnSubmit').click(function(){
    alert("button");
});

또는

//Use this code if button is appended in the DOM
$(document).on('click','#btnSubmit',function(){
    alert("button");
});

자세한 내용은 설명서를 참조하십시오 :
https://api.jquery.com/click/


sweetalert와 같은 알림을 사용하는 경우 dom에 추가 된 버튼은 항상 문제입니다. 지적 해 주셔서 감사합니다
Deepesh Thapa


5

이 시도:

$(document).on('click', '#btnClick', function(){ 
    alert("button is clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button id="btnClick">Click me</button> 


이 스크립트가 실행 된 후에 #btnClick이 생성되면이 버전은 여전히 ​​작동하는 이점이 있습니다.
Jimbali

3
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $("#button").click(function(){
    alert("Hello");
  });
});
</script>

<input type="button" id="button" value="Click me">

1

<script type="text/javascript">

    $(document).ready(function() {

    $("#Button1").click(function() {

        alert("hello");

    });

    }
    );

</script>

1
$('#btnSubmit').click(function(event){
    alert("Button Clicked");
});

또는 제출 버튼을 사용하면 양식의 validate 이벤트에 코드를 작성할 수 있습니다.

$('#myForm').validate(function(){
    alert("Hello World!!");
});

0

나를 위해 작동

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$("#btn").click(function() {
    alert("email")
});

</script>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.