Question

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

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

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

检测是否显示bootstrap模态窗口无法正常工作

1 个答案: