Comment gérer les événements de clic de bouton dans jQuery?

128

J'ai besoin d'un bouton et de gérer son événement dans jQuery. Et j'écris ce code mais ça ne marche pas. Ai-je oublié quelque chose?

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

Et dans le fichier javascript

function btnClick()
{
    //    button click
    $("#btnSubmit").button().click(function(){
        alert("button");
    });    
}
jquery Ahmad Farid
la source
1
Pourquoi ne pas simplement le retirer de la btnClickfonction englobante ? Je ne vois pas ce que cela ajoute
CodyBugstein

Réponses:

248

Vous devez mettre le gestionnaire d'événements dans l'événement $ (document) .ready ():

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
    }); 
});
Davide Gualano
la source
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;
     });


});
Lawrence Gandhar
la source
5
Bon parce que c'est le seul qui insère le preventDefault ()
Gabrer
12
Depuis jQuery 1.7, la .on()méthode est la méthode préférée pour attacher des gestionnaires d'événements à un document. Par conséquent, ce serait mieux:$('your selector').on("click", ...);
Tinynumbers
11 
$('#btnSubmit').click(function(){
    alert("button");
});

ou

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

Voir la documentation pour plus d'informations:
https://api.jquery.com/click/

Bruce Phillip Perez
la source
Le bouton ajouté dans la chose dom est toujours un problème si vous utilisez une notification comme sweetalert. Merci de l'avoir signalé
Deepesh Thapa
6 
 $("#btnSubmit").click(function(){
        alert("button");
    });
Ali Tarhini
la source
5

Essaye ça:

$(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>
Développer l'extrait

Rafiqul Islam
la source
Cette version a l'avantage de continuer à fonctionner si #btnClick est créé après l'exécution de ce script.
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">
Nivediny
la source
1 

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

</script>
Anup Ghanshala
la source
1 
$('#btnSubmit').click(function(event){
    alert("Button Clicked");
});

ou lorsque vous utilisez le bouton d'envoi afin que vous puissiez écrire votre code dans l'événement de validation du formulaire comme

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

Travaille pour moi

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