Boîte de dialogue jQuery UI - problème avec événement à la fermeture

Question

J'essaie d'effectuer une action spécifique lorsque je ferme une boîte de dialogue jQuery UI. Voici une version simplifiée de mon code:

$('a.open-trigger').click(function(){ 
    var test = 'hello'; 

    $('#dialog').dialog({ 
     bgiframe: true, 
     dialogClass: 'change', 
     resizable: false, 
     draggable: false, 
     modal: true, 
     height: 334, 
     width: 450, 
     autoOpen: false, 
     show: 'fade' 
    }); 

    $('#dialog').dialog('open'); 

    $('a.close-trigger').click(function(){ 
     alert(test); 
     $('#dialog').dialog('close'); 
    }); 
}); 

La première fois que je ferme la boîte de dialogue, je reçois l'alerte attendue avec le mot « bonjour ». Si j'ouvre la boîte de dialogue une seconde fois et que je la ferme, je reçois l'alerte "Bonjour" deux fois. Si je l'ouvre et le ferme une troisième fois, je reçois trois alertes, et ainsi de suite. Pourquoi ces alertes se dupliquent-elles? Je voudrais que l'alerte ne s'affiche qu'une fois à la fermeture, peu importe combien de fois j'ouvre/ferme la boîte de dialogue.

Merci! Simon

Answer 1

Vous ajoutez des gestionnaires d'événements supplémentaires chaque fois que vous appelez .click. C'est pourquoi il duplique. Tirez ce code sur le même niveau que l'autre liaison d'événement et cela devrait fonctionner comme prévu.

Answer 2

Vous avez lié une fonction au bouton d'ouverture qui ajoute un gestionnaire d'événements au bouton de fermeture chaque fois que l'événement ouvert est déclenché. Vous devez ajouter votre gestionnaire d'événements à proximité quelque part en dehors de la fonction d'événement « a.open déclenchement » ...

$('a.open-trigger').click(function(){ 
     var test = 'hello'; 

     $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'}); 
     $('#dialog').dialog('open'); 
}); 

$('a.close-trigger').click(function(){ 
     alert(test); 
     $('#dialog').dialog('close'); 
}); 

Answer 3

Vous devez prendre le gestionnaire d'événements, cliquez sur Fermer sur le gestionnaire d'événement click ouvert

$(function() { 
    $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'}); 

    $('a.open-trigger').click(function(){  
     $('#dialog').dialog('open'); 
    }); 


    $('a.close-trigger').click(function(){ 
     alert("hello"); 
     var myDialog = $('#dialog'); 
     if (myDialog.dialog('isOpen')) 
      myDialog.dialog('close'); 
    }); 
});