Làm thế nào để xử lý các sự kiện nhấn nút trong jQuery?


128

Tôi cần phải có một nút và xử lý sự kiện của nó trong jQuery. Và tôi đang viết mã này nhưng nó không hoạt động. Tôi đã bỏ lỡ một cái gì đó?

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

Và trong tệp javascript

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

1
Tại sao không chỉ đưa nó ra khỏi btnClickchức năng kèm theo ? Tôi không thấy những gì thêm vào
CodyBugstein

Câu trả lời:


248

Bạn phải đặt trình xử lý sự kiện trong sự kiện $ (tài liệu). Đã ():

$(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
Tốt vì là người duy nhất chèn
ngăn chặnDefault

12
Kể từ jQuery 1.7, .on()phương thức này là phương thức ưa thích để đính kèm các trình xử lý sự kiện vào tài liệu. Do đó, điều này sẽ tốt hơn:$('your selector').on("click", ...);
Tinynumbers

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

hoặc là

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

Xem tài liệu để biết thêm thông tin:
https://api.jquery.com/click/


Nút được nối trong điều dom luôn là một vấn đề nếu sử dụng thông báo như sweetalert. Cảm ơn bạn đã chỉ ra
Deepesh Thapa


5

Thử cái này:

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


Phiên bản này có lợi ích vẫn hoạt động nếu #btnClick được tạo sau khi tập lệnh này chạy.
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");
});

hoặc như bạn đang sử dụng nút gửi để bạn có thể viết mã của mình trong sự kiện xác thực mẫu như

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

0

Làm việc cho tôi

<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>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.