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

Posted 2023-03-15

【中文标题】如何在 jQuery 中处理按钮单击事件？

【英文标题】：How to Handle Button Click Events in jQuery?

【发布时间】：2010-12-01 11:29:18

【问题描述】：

我需要一个按钮并在 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");
    );    

【问题讨论】：

为什么不把它从封闭的btnClick函数中取出呢？我看不出增加了什么

【参考方案1】：

您必须将事件处理程序放在 $(document).ready() 事件中：

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

【参考方案2】：

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


);

【讨论】：

很好，因为它是唯一插入 preventDefault() 的人

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

【参考方案3】：

$('#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 中的按钮总是一个问题。谢谢指出

【参考方案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> 

【讨论】：

如果在此脚本运行后创建#btnClick，则此版本的优点是仍然有效。

【参考方案5】：

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

【参考方案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">

【参考方案7】：

<script type="text/javascript">

    $(document).ready(function() 

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

        alert("hello");

    );

    
    );

</script>

【参考方案8】：

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

或者当您使用提交按钮时，您可以在表单的验证事件中编写代码，例如

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

【参考方案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>