Twitter Bootstrap Modal Wielokrotne wypalanie zdarzeń

Question

To jest dziwny problem i szukałem odpowiedzi, ale nie mogłem znaleźć takiej, która pasowałaby do mojego kodu.

EDIT: Ten problem występuje na ciężkiej stronie Ajax, gdzie strona nie jest odświeżana, a Modal są ponownie wykorzystywane.

Uwaga moja Javascript jest trochę słaby, więc jestem chyba zbliża ten problem złego

znalazłem podobne problemy here i here

opisują problem ja mam, ale po prostu zaktualizować widok wywołujący na ukrytym. Nie wiążę ze zdarzeniem przycisku.

mam wiele czasowniki modalne zdefiniowane

<div id="modal_small" class="modal hide fade in"> 
    </div> 
    <div id="modal_large" class="modal hide fade in"> 
    </div> 

I ponowne te czasowniki modalne. Tak więc modal_large wyświetla formularz Utwórz jedną sekundę, a następnie pokazuje listę obrazów, które można wybrać.

I czynią moi czasowniki modalne wykorzystujące następujący skrypt przechodzący w celu wykazać w każdym przypadku

 function show_modal_large(href) { 
      $.get(href, function (data) { 
       $('#modal_large').html(data); 
       $('#modal_large').modal('show'); 
      }); 
     }; 

Moim celem jest ponowne te czasowniki modalne. i to, gdzie leży problem wierzę

W „$ (document) .ready” od widoku, który ma zamiar wyświetlić modal nazywam ten skrypt do wiązania „ukryte” imprezy przez czasowniki modalne

$('#modal_large').on('hidden', function() { 
       // Make Ajax Call - THIS WORKS 
    }); 

W związku z tym w obrazie masz listę w widoku pokazującym wybrane zdjęcia. następnie otwórz modal i wybierz więcej zdjęć. On Hidden i Aktualizuj wybrane zdjęcia w formularzu wywołującym.

Wszystko działa dobrze.

problem:

Gdy po raz pierwszy otworzyć modal i zamknąć go „na” ukryty zdarzenia jest opalane raz. po raz drugi otwieram i zamykam modal "ukryte" wydarzenie to wywołanie dwa razy, trzeci raz trzy połączenia i tak dalej. Jeśli odejdę i użyję modalu do czegoś innego z innym "ukrytym" wydarzeniem, ukrytym wydarzeniem jest zadzwonić pod numer cztery razy razy za NOWE wydarzenie ukryte i Cztery razy w przypadku starego ukrytego wydarzenia cztery razy:. Po chwili mój system po prostu umiera ze wszystkimi wywołaniami ajax.

Czy brakuje mi czegoś? Jak powinienem uporządkować mój Kodeks, aby tak się nie stało?

Answer 1

Ok Zorientowałem to ... dobrze. Mam nadzieję, że ten kod przydaje się komuś innemu.

Ponieważ byłem związany z "ukrytym" zdarzeniem modalu, za każdym razem, gdy był on tworzony, właśnie dodawałem kolejne wiązanie i kolejne wywołanie do wszystkich poprzednich wiązań również.

Więc do ponad przyjść ten Pozbyłem starych modalnych deklaracji

<div id="modal_small" class="modal hide fade in"> 
</div> 
<div id="modal_large" class="modal hide fade in"> 
</div> 

i zamiast nich dynamicznie tworzyć czasowniki modalne jak trzeba je jak tak i przechodzącej w rozmowie z powrotem do „ukryte” impreza

 function show_modal_large(href, callback) { 
      // create guid to name of this Modal 
      var randomNum = guid(); 
      // create element with guid id 
      var elementName = '#' + randomNum.toString(); 
      $('body').append("<div id=" + randomNum + " class='modal hide fade in'></div>"); 
      // create Modal and show 
      $.get(href, function (data) { 
       $(elementName).html(data); 
       // register call back to 'hidden' event 
       $(elementName).on('hidden', function() { 
        callback(); 
        // clean up after hidden 
        $(elementName).unbind(); 
        $(elementName).remove(); 
       }); 
       $(elementName).modal('show'); 
      }); 
     }; 

     function s4() { 
      return Math.floor((1 + Math.random()) * 0x10000) 
         .toString(16) 
         .substring(1); 
     }; 

     function guid() { 
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
        s4() + '-' + s4() + s4() + s4(); 
     } 

mam tworzenie Guid z Stackoverflow question here

działa to dla mnie świetnie. I rozwiązuje MOJ problem.

Answer 2

Możesz również użyć .one zamiast .on, a wydarzenie, które chcesz powiązać, będzie uruchamiane tylko raz.