Bootstrap Modal集成clockpicker后时间无法更新问题求助

我帮你排查出几个导致这个问题的关键原因，还有对应的修复方案：

问题根源 #

• 重复引入jQuery：你的代码里先后加载了两次jquery.min.js，这会覆盖之前绑定的所有jQuery插件事件，包括clockpicker的初始化逻辑，这是核心问题之一。
• 初始化时机不对：页面加载时就初始化clockpicker，但Modal里的时间选择器元素默认是隐藏状态，部分事件绑定无法正确生效；而且Bootstrap Modal显示时会修改DOM的层级和状态，需要在Modal显示完成后再初始化组件。
• Bootstrap Modal的焦点拦截：Modal组件会拦截focus事件的冒泡，而clockpicker依赖焦点事件来同步选择的时间到输入框。

修复后的完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="http://ee.nsysu.edu.tw/key/bootstrap/css/bootstrap.min.css">
<link href="http://ee.nsysu.edu.tw/key/bootstrap/css/bootstrap-clockpicker.min.css" rel="stylesheet"/>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/jquery.min.js"></script>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/bootstrap.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
<div class="input-group clockpicker" style="width: 50%; float: left;">
<input type="text" class="form-control" value="09:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

<script>
// 监听Modal显示事件，在Modal完全显示后初始化clockpicker
$('#exampleModal').on('shown.bs.modal', function () {
    $('.clockpicker').clockpicker({
        // 可选：添加关闭后更新输入框的配置
        afterDone: function() {
            $(this).find('input').blur();
        }
    });
});

// 监听Modal隐藏事件，销毁clockpicker避免重复初始化
$('#exampleModal').on('hidden.bs.modal', function () {
    $('.clockpicker').clockpicker('remove');
});
</script>
</body>
</html>

关键修复点说明 #

1. 移除重复的jQuery引入：只保留一次jquery.min.js的加载，确保插件事件不会被覆盖。
2. 调整资源加载顺序：先加载CSS，再加载jQuery，接着加载Bootstrap，最后加载clockpicker，保证依赖顺序正确。
3. 在Modal显示后初始化clockpicker：使用Bootstrap Modal的shown.bs.modal事件，确保Modal完全显示、元素处于可见状态后再初始化组件，解决隐藏元素绑定事件失效的问题。
4. Modal隐藏时销毁组件：使用hidden.bs.modal事件销毁clockpicker，避免下次打开Modal时重复初始化导致的冲突。
5. 添加afterDone回调：强制输入框失去焦点，确保选择的时间能同步到输入框，解决Modal焦点拦截的问题。

内容的提问来源于stack exchange，提问作者mayyola