Обнаружение, если окно загрузки модального окна не работает должным образом

Question

Я должен нарисовать что-то в окне модального окна, если пользователь нажмет на кнопку. Мой код:

$('#button').on('click', function (evt) { 
    doSomeCrazyStuff();  
    $('#myModal').modal('show');   
    $('#myModal').on('shown.bs.modal', function (e) { 
     alert('Debug'); 
     drawStuffInModal();    
    }); 
}); 

Для первого щелчка все работает нормально. Но для второго щелчка я получаю два предупреждения, третий клик - три предупреждения и т. Д.

Пользователь может нажать кнопку, только если модаль скрыт, поэтому ему необходимо закрыть модальное изображение перед следующим рисунком.

Я обнаружил, что проблема является обнаружение модального состояния окна - если я не использую $('#myModal').on('shown.bs.modal', function (e) {}), но только и ждут:

$('#button').on('click', function (evt) { 
    doSomeCrazyStuff();  
    $('#myModal').modal('show');   
    setTimeout(function() { 
     alert('Debug'); 
     drawStuffInModal();    
    }, 500); 
}); 

... Я всегда получаю предупреждение один раз. Это работает, но это очень уродливое решение.

Итак, мой вопрос: почему первый код работает неправильно? Я не хочу ждать n miliseconds, потому что в некоторых случаях модальным может потребоваться больше времени для загрузки, а затем пользователь получает ошибки.

Answer 1

Не привязывайте новое событие к другому обработчику событий кликов. Нажмите на #button может случиться много раз, а это значит, что он свяжет много подобных дублированных событий. Просто перейдите на номер shown.bs.modal подписка на мероприятия на улице:

$('#myModal').on('shown.bs.modal', function (e) { 
    alert('Debug'); 
    drawStuffInModal();    
}); 

$('#button').on('click', function (evt) { 
    doSomeCrazyStuff();  
    $('#myModal').modal('show');   
});