วิธีจัดการกับเหตุการณ์การคลิกปุ่มใน jQuery


128

ฉันต้องมีปุ่มและจัดการกับเหตุการณ์ใน 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");
    });    
}

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 ()
Gabrer

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 ขอบคุณสำหรับการชี้ให้เห็น
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
$('#btnSubmit').click(function(event){
    alert("Button Clicked");
});

หรือตามที่คุณใช้ปุ่มส่งเพื่อให้คุณสามารถเขียนรหัสของคุณในเหตุการณ์ที่ตรวจสอบความถูกต้องของแบบฟอร์ม

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