javascript - Detecting if bootstrap modal window is show don't work properly -

i have draw in bootstrap modal window if user click on button. code is:

$('#button').on('click', function (evt) {     dosomecrazystuff();         $('#mymodal').modal('show');             $('#mymodal').on('shown.bs.modal', function (e) {         alert('debug');         drawstuffinmodal();                 }); }); 

for first click works fine. second click 2 alerts, third click - 3 alerts etc.

user can click button if modal hidden, need close modal before next drawing.

i found out problem detecting of modal window state - if don't use $('#mymodal').on('shown.bs.modal', function (e) {}) waiting:

$('#button').on('click', function (evt) {     dosomecrazystuff();         $('#mymodal').modal('show');             settimeout(function () {         alert('debug');         drawstuffinmodal();                 }, 500); }); 

... alert once. works, it's ugly solution.

so question is: why first code not working properly? don't want wait n miliseconds because in cases modal can need more time loading , user got errors.

don't bind new event in click event handler. click on #button can happen many times, means bind many similar duplicated events. move shown.bs.modal event subscription outside:

$('#mymodal').on('shown.bs.modal', function (e) {     alert('debug');     drawstuffinmodal();             });  $('#button').on('click', function (evt) {     dosomecrazystuff();         $('#mymodal').modal('show');         });