¿Cómo manejar eventos de clic de botón en jQuery?

128

Necesito tener un botón y manejar su evento en jQuery. Y estoy escribiendo este código pero no funciona. ¿Me he perdido algo?

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

Y en el archivo javascript

function btnClick()
{
    //    button click
    $("#btnSubmit").button().click(function(){
        alert("button");
    });    
}
jquery Ahmad Farid
fuente
1
¿Por qué no simplemente sacarlo de la btnClickfunción de cierre ? No veo lo que eso agrega
CodyBugstein

Respuestas:

248

Debe colocar el controlador de eventos en el evento $ (document) .ready ():

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
    }); 
});
Davide Gualano
fuente
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
fuente
55
Bueno porque es el único que inserta preventDefault ()
Gabrer
12
A partir de jQuery 1.7, el .on()método es el método preferido para adjuntar controladores de eventos a un documento. Por lo tanto, esto sería mejor:$('your selector').on("click", ...);
Tinynumbers
11 
$('#btnSubmit').click(function(){
    alert("button");
});

o

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

Consulte la documentación para obtener más información:
https://api.jquery.com/click/

Bruce Phillip Perez
fuente
El botón agregado en el elemento dom siempre es un problema si se usa una notificación como sweetalert. Gracias por señalarlo
Deepesh Thapa
6 
 $("#btnSubmit").click(function(){
        alert("button");
    });
Ali Tarhini
fuente
5

Prueba esto:

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

Rafiqul Islam
fuente
Esta versión tiene la ventaja de seguir funcionando si se crea #btnClick después de ejecutar este 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
fuente
1 

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

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

o como está utilizando el botón Enviar para que pueda escribir su código en el evento de validación del formulario como

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

Funciona para mi

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