2013-02-14 25 views
9

Bu garip bir sorundur ve bir cevabı aradım ancak koduma uygun bir yer bulamadım.Twitter Bootstrap Modal Çoklu olay ateşleme

DÜZENLEME: Bu sorun, sayfanın yenilenmediği ve Modal yeniden kullanılmakta olduğu Ajax sayfası üzerinde gerçekleşir.

benim JavaScript yüzden muhtemelen Hem ben yaşıyorum ama ben sadece çağıran görünümünü güncellemek sorunu tanımlamak yanlış konuyu

Ben bulduk benzer konular here ve here

yaklaşıyorum biraz zayıf olduğunu unutmayınız gizli Bir düğme olayına bağlamıyorum.

Birden Fiiller Bunları sistemle modeller yeniden

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

tanımlanmış bulunmaktadır. Bu nedenle, modal_large bir Form Oluştur'u bir saniye gösterir ve bundan sonra seçim yapabileceğiniz resimlerin bir listesini gösterir.

Ben görünümünde geçen aşağıdaki komut dosyasını kullanarak modals her örneği

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

burada My Goal bu sistemle modeller yeniden etmektir gösterilmesini render. sorun burada yatıyor ve bu i bu yazı modals 'gizli' olaya bağlamak için çağrı modal görüntülemek için gidiyor bakış "$ (document) .ready" olarak

inanıyorum

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

Bu nedenle, görüntülemenizi seçtiğiniz görüntüleri gösteren bir listeniz var. Daha sonra bir model açın ve daha fazla görüntü seçin. Gizli Açık Seçilen resimleri arayan formda günceller.

Her şey iyi çalışıyor.

Sayı:

i modal açıp olayı 'gizli üzerine' bir kez ateşlenir kapatın ilk kez. modal'ı açıp kapattığımda ikinci kez 'gizli' olayı iki kez, üçüncü kez üç kez çağrılır. Farklı bir 'gizli' olayla başka bir şey için modal kullanıp kullanırsam, gizli olay, eski gizli etkinlik için dört kez çağrılır ve eski gizli etkinlik için Dört kez çağrılır. Kısa bir süre sonra sistemim tüm ajax çağrılarıyla öldü.

Bir şey mi eksik? Kodumu nasıl yapılandırmalıyım, bu olmayacak mı?

cevap

5

Tamam Bunu anladım ... iyi bir çeşit. Umarım bu kod başka birine de uygulanır.

Modalın 'gizli' olayına bağlanırken, her oluşturulduğunda, yalnızca başka bir ciltleme ekliyordum ve bir önceki bağları da çağırıyordum.Yani

üzerinde ben bu yüzden geri 'gizli' çağrısı geçen gibi ihtiyacınız olduğunda ben dinamik sistemle modeller oluşturmak ve bunları yerine

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

eski modal bildirimleri kurtuldum bu gelip

 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(); 
     } 

olay

Ben Stackoverflow question here

Bu benim için iyi çalışıyor den Guid oluşturma aldık. Ve meseleyi çözer.

6

Ayrıca .on yerine .one kullanabilirsiniz ve bağladığınız etkinlik yalnızca bir kez ateşlenecektir. Yukarıdaki örnekte

+0

, aslında olayı birden çok kez arayabilmem gerektiği için işe yaramazdı – KevDevMan