web-dev-qa-db-fra.com

le gestionnaire d'événements jQuery .on () ne fonctionne pas

Je veux attacher un événement à la classe d'éléments créée dynamiquement. J'ai donc utilisé la fonction de direct, mais celle-ci n'a pas été déclenchée. Donc vérifié référence de la fonction en direct , il y a en dessous des notes rouges

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () à attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () de préférence à .live ().

alors décidez d’utiliser on function, mais cela ne fonctionne toujours pas.Le champ texte est déjà attaché avec jquery ui datpicker.Sur un autre élément, sélectionnez i désactivé ce champ.

jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');

après désactivé si je clique je veux montrer alerte ou tooltip.so j'ai essayé cela, mais ne fonctionne pas

jQuery(".date_picker_disabled").on("click", function(event){
          alert('hi');
  });

Quel peut être le problème

J'utilise jquery 1.7.1 (jquery-1.7.1.min.js)

event-handlingjqueryjquery-ui-datepicker
33
Gowri

Le problème est que jQuery(".date_picker_disabled") trouve des éléments avec cette classe et s'y lie. Si les éléments n'ont pas la classe au moment où la liaison est faite, les événements ne seront pas gérés.

La fonction on vous permet de résoudre ce problème en les gérant sur un autre élément lorsque l'événement "bouillonne" jusqu'à un élément parent. Dans ce cas, nous pourrions dire l'élément body - il peut y avoir un parent commun plus spécifique que vous pourriez choisir.

jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
    alert('hi');
});

Le gestionnaire d'événements est maintenant lié à l'élément document.body. Tous les clics qui se produisent n'importe où dans le corps sont testés pour voir s'ils proviennent d'un élément correspondant au sélecteur. Si c'est le cas, le gestionnaire est renvoyé.

Ceci est expliqué dans la documentation de la fonction on . C'est le même comportement que dans les versions précédentes de jQuery avec les fonctions live et delegate.

Après avoir examiné de nouveau votre code, vous avez défini disabled="disabled" sur votre élément input. Les événements click ne sont pas déclenchés sur les éléments désactivés.

95
lonesomeday

C'est délicat.

Lorsque votre code est exécuté, votre élément n'a pas de classe .date_picker_disabled. Votre jQuery(".date_picker_disabled") ne renvoie rien et .on() n'est pas appelé.

Appliquez .on () sur l'élément externe et utilisez le paramètre selector:

// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
    // do something
});

Cela déléguera l'événement au <outer element>. Le gestionnaire ne sera exécuté que si un élément de la classe .date_picker_disabled a été cliqué (deuxième paramètre).

6
Didier Ghys

De la documentation de .live() :

Réécrire la méthode .live () en fonction de ses successeurs est simple; ce sont des modèles pour des appels équivalents pour tous trois méthodes de fixation d'événement:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Donc dans votre cas, vous feriez:

$(document).on('click', '.date_picker_disabled', function(event){
    alert('hi');
});
5
PPvG

J'utilisais jQuery 1.7.2 et essayais toutes les méthodes proposées: 

N'a pas fonctionné:  

$(document.body).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

N'a pas fonctionné:  

$(document).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

Aucun d'entre eux n'a fonctionné jusqu'à ce que j'essaye ce qui suit: 

----- Travaillé! ----  

$('body .collapsible-toggle').on('click',   function() {
        console.log('clicked');
});
2
Eduardo Chongkan

essayez:

$(document.body).on( "click", ".date_picker_disabled", function() {   
   alert('hi');
});

document.body aide aussi pour le code HTML dynamique . Il suffit de le vérifier: .on ne fonctionne pas avec le code HTML dynamique

0
Asmita

Peut-être devriez-vous faire:

jQuery("body").on("click",".date_picker_disabled", function(event){
          alert('hi');
  });

de cette manière, vous associez le gestionnaire d’événements au bosy et spécifiez de ne déclencher cet événement que lorsque le sélecteur ".date_picker_disabled" correspond.
BTW c'est exactement comme cela que live() a fonctionné

0
Nicola Peluchetti