如何在jQuery中处理按钮点击事件？

Question

我需要在jQuery中创建一个按钮并处理它的事件。我写了下面的代码，但是它没有起作用，我错过了什么吗？

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

在 JavaScript 文件中

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

- Ahmad Farid

---

为什么不直接将其从封闭的 btnClick 函数中移除？我不明白那样做有什么好处。 - CodyBugstein

Answer 1

你需要将事件处理程序放在$(document).ready()事件中：

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

- Davide Gualano

Answer 2

$('#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/

- Bruce Phillip Perez

---

如果使用诸如sweetalert之类的通知，将按钮附加到dom中始终是一个问题。感谢指出。 - Deepesh Thapa

强调如果元素被添加。非常有用。谢谢。 - jovialcore

附加到DOM+1! - Bilaal Abdel Hassan

Answer 3

$(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;
     });


});

- Lawrence Gandhar

---

好的，因为它是唯一一个插入preventDefault()的人。 - Gabrer

从jQuery 1.7版本开始，.on() 方法是附加事件处理程序到文档的首选方法。因此，这样写会更好：$('your selector').on("click", ...); - Tinynumbers

Answer 4

试试这个：

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

- Rafiqul Islam

---

这个版本的好处是，即使在运行此脚本之后创建了 #btnClick，它仍然可以正常工作。 - Jimbali

Answer 5

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

- Ali Tarhini

Answer 6

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

- Nivediny

Answer 7

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

如果您正在使用提交按钮，则可以在表单的验证事件中编写代码，例如：

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

- Hiren

Answer 8

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

</script>

- Anup Ghanshala

Answer 9

对我来说可行

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

- navyad