检测是否显示引导模态窗口不能正常工作

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

本文关键字：常工作 工作 不能 窗口 显示 是否 模态 检测      更新时间：2023-09-26

如果用户点击按钮，我必须在引导模式窗口中绘制一些东西。我的代码是:

$('#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毫秒，因为在某些情况下，模态可能需要更多的时间来加载，然后用户得到错误。

不要在另一个click事件处理程序中绑定新事件。点击#button可以发生多次，这意味着它将绑定许多相似的重复事件。只需将shown.bs.modal事件订阅移到外部:

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