web-dev-qa-db-fra.com

bouton de saisie jQuery clic écouteur d'événement

Tout nouveau pour jQuery. J'essayais de configurer un écouteur d'événements pour le contrôle suivant sur ma page qui, une fois cliqué, afficherait une alerte:

<input type="button" id="filter" name="filter" value="Filter" />

Mais ça n'a pas marché.

$("#filter").button().click(function(){...});

Comment créer un écouteur d'événement pour un contrôle de bouton d'entrée avec jQuery?

javascriptjquerybuttonjavascript-eventsonclick
31
Bob

Tout d’abord, button() est une fonction jQuery ui pour créer un widget de bouton qui n’a rien à voir avec le noyau jQuery, elle donne simplement un style au bouton.
Donc, si vous souhaitez utiliser le widget, ajoutez les fichiers javascript et CSS de jQuery ui ou supprimez-le, comme ceci:

$("#filter").click(function(){
    alert('clicked!');
});

Le problème peut aussi être dû au fait que vous n'avez pas attendu le rendu de l'entrée et écrit le code avant l'entrée. jQuery a le fonction ready, ou son alias $(func) qui exécute le rappel une fois que le DOM est prêt.
Usage:

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

Donc, même si la commande est la suivante, cela fonctionnera:

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

<input type="button" id="filter" name="filter" value="Filter" />

[~ # ~] démonstration [~ # ~]

61
gdoron
$("#filter").click(function(){
    //Put your code here
});
5
Danilo Valente

Pour en savoir plus sur la réponse de gdoron, vous pouvez également le faire de la manière suivante:

$(window).on("click", "#filter", function() {
    alert('clicked!');
});

sans avoir besoin de les placer tous dans $(function(){...})

3
H0WARD