Javascript Girl
  1. Javascript Girl
  3. Mostra.smodal incendie plusieurs fois lorsque vous fermez et rouvrez le mode
Intereting Posts
Données dynamiques avec Google Charts Comment révéler.js redimensionner les éléments? Est-ce que Javascript a quelque chose comme la caractéristique de la méthode de Ruby? Function.bind vs Closure en Javascript: comment choisir? JS objet de la chaîne JSON? Comment appeler le code de service AngularJS à partir de la visionneuse Android? Json_encode est-il une protection XSS suffisante? Javascript calculer la date à partir du numéro de la semaine Quelle est la syntaxe de référence JavaScript utilisée dans Visual Studio? La gestion de l'échec de la charge prerequsites dans RequireJS nécessite une fonction Est-ce une mauvaise pratique d'incorporer JavaScript dans le corps du HTML? JavaScript (ou JS + PHP) Terminal Client Comment réparer le scintillement qui se produit lorsque vous utilisez slideToggle dans jQuery? Alternative Open Source à AddThis AddToAny, ShareThis etc for Social Bookmarking Comment détecter si une requête a été interrompue?

Mostra.smodal incendie plusieurs fois lorsque vous fermez et rouvrez le mode

J'ai fait une violoncelle illustrant le problème auquel je suis confronté pour le moment. Donc, chaque fois que je ferme et ouvre un mode, shown.bs.modal se déclenche plusieurs fois. Dans cette violon, chaque fois que vous fermez et ouvrez un mode, le nombre d'alertes augmente également (quand il est censé déclencher une seule fois). Http://jsfiddle.net/j36h2/1/ 

 function openTestModal(){ $('#testModal').modal({ keyboard: false, backdrop: 'static' }); $('#testModal').on('shown.bs.modal', function (e) { alert(''); }); } $('.testButton').click(function(){ openTestModal(); });

Vous devez extraire votre fonction d'alerte de votre événement de clic:

http://jsfiddle.net/SyCNj/2/

extrait : 

 function openTestModal(){ $('#testModal').modal({ keyboard: false, backdrop: 'static' }); } $('#testModal').on('shown.bs.modal', function (e) { alert(''); }); $('.testButton').click(function(){ openTestModal(); });

Ou vous pouvez essayer ceci: 

 $('#testModal').on('shown.bs.modal', function (e) { alert(''); $(this).off('shown.bs.modal'); });

C'est parce que vous attachez plusieurs gestionnaires d'événements pour l'événement, au premier clic, vous écoutez une fois, sur le deuxième clic deux fois, et ainsi de suite, écoutez l'événement en dehors du contexte de la fonction openTestModal .

La réponse acceptée de @ Put12co22mer2 est correcte. Cependant, il existe des moments où vous souhaitez relancer l'événement lors de l'ouverture du mode. Disons que vous avez des options qui devraient être utilisées. 

 function openTestModal(options){ $('#testModal').modal({ keyboard: false, backdrop: 'static' }); $('#testModal').one('shown.bs.modal', function (e) { // do something with options alert(options.foo); }); } $('.testButton').click(function(){ openTestModal({ foo: bar}); });

Ensuite, vous pouvez utiliser one au lieu de on . Le résultat sera le même que le déblocage, mais un peu plus propre à mon avis.

http://api.jquery.com/one/

La méthode .one () est identique à .on (), sauf que le gestionnaire est non lié après sa première invocation

La fonction ci-dessous est utilisée pour toutes les boîtes de dialogue de ma application.

Il est appelé chaque fois avec un rappel différent à exécuter. La solution la plus simple pour moi consiste simplement à supprimer le gestionnaire d'événements avant d'en ajouter un nouveau. 

 function messageBox(action,...) { $("#modal-btn-ok").off("click"); $("#modal-btn-ok").on("click", function(e) { action(e); });

Définissez la variable et définissez sa valeur à 1; comme: 

 function openTestModal(){ $('#testModal').modal({ keyboard: false, backdrop: 'static' }); var e=1; $('#testModal').on('shown.bs.modal', function (e) { alert(''); e=0; }); }

Vous pouvez essayer comme suit: (Bootstrap v3.3.6) 

 $('#dialog') .modal({show: false}) .on('hide.bs.modal', function () { //.................. }).on('shown.bs.modal', function (event) { //.................. }).on('hidden.bs.modal', function () { $("#dialog").off(); }); $('#dialog').modal('show');