Estou abrindo um diálogo modal desta forma:
let myModal = new bootstrap.Modal('#myModal', {
keyboard: false,
backdrop: 'static'
});
#myModal
tem um botão ao qual vinculo o evento de clique no shown
evento modal.
$('#myModal').on('shown.bs.modal', event => {
$('#btnMyButton').on('click', function ()
{
console.log('Was clicked!');
});
});
E quando fecho o modal, estou desvinculando o evento:
$('#myModal').on('hidden.bs.modal', event => {
$('#btnMyButton').off('click');
$('#myModal').off('show.bs.modal');
$('#myModal').off('shown.bs.modal');
$('#myModal').off('hidden.bs.modal');
myModal.dispose();
console.log('hidden here!');
})
O problema é que, quando mostro a caixa de diálogo modal pela primeira vez e pressiono o botão, click
o evento é chamado uma vez.
Se eu fechar o diálogo e abri-lo novamente, o evento Click é chamado duas vezes, e assim por diante.
Como posso desvincular corretamente o evento de clique? Por que myModal.dispose()
o desvincula eventos automaticamente?