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
source

1

Pourquoi ne pas simplement le retirer de la btnClickfonction englobante ? Je ne vois pas ce que cela ajoute

— CodyBugstein

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

1

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

</script>

— Anup Ghanshala
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
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
source