Bootstrap Timepicker无法绑定changeTime/focusout事件求助

看起来你遇到的核心问题是：隐藏状态下的timepicker输入框，无法正常绑定changeTime或focusout事件。这主要是因为初始状态下你的.starttime_dd是隐藏的，部分版本的bootstrap-timepicker在初始化隐藏元素时，事件无法正确挂载到DOM节点上。下面给出两种可行的解决方案：

方案一：点击显示后再初始化并绑定事件 #

这种方式可以确保timepicker在可见状态下完成初始化，事件绑定更可靠：

$(".starttime_text").click(function(){
    const $currentText = $(this);
    const $timepickerContainer = $currentText.siblings(".starttime_dd");
    
    // 切换显示状态
    $currentText.hide();
    $timepickerContainer.show();
    
    // 获取timepicker输入框，避免重复初始化
    const $timepickerInput = $timepickerContainer.find(".starttime");
    if (!$timepickerInput.data('timepicker')) {
        // 初始化timepicker并绑定事件
        $timepickerInput.timepicker()
            .on('changeTime', function() {
                const selectedTime = $(this).val();
                console.log('选中的时间：', selectedTime);
                
                // 执行AJAX保存逻辑
                $.ajax({
                    url: '你的时间保存接口', // 替换成实际接口地址
                    method: 'POST',
                    data: {
                        time: selectedTime,
                        // 可以添加标识数据的参数，比如从td或父元素获取
                        // id: $currentText.closest('td').data('id')
                    },
                    success: function(res) {
                        // 保存成功后更新显示并隐藏timepicker
                        $currentText.text(selectedTime);
                        $timepickerContainer.hide();
                        $currentText.show();
                    },
                    error: function() {
                        alert('保存失败，请重试');
                    }
                });
            })
            .on('focusout', function() {
                // 失去焦点时自动隐藏timepicker
                $timepickerContainer.hide();
                $currentText.show();
            });
    }
    
    // 自动聚焦到输入框，提升用户体验
    $timepickerInput.focus();
});

方案二：使用事件委托（适合多元素场景） #

如果页面上有多个这类时间选择单元格，事件委托会更高效，也能避免重复初始化的问题：

$(function() {
    // 一次性初始化所有timepicker（即使隐藏也可以执行）
    $(".starttime").timepicker();
    
    // 用事件委托绑定changeTime事件
    $(document).on('changeTime', '.starttime', function() {
        const $this = $(this);
        const selectedTime = $this.val();
        const $textSpan = $this.closest('.starttime_dd').siblings('.starttime_text');
        
        // AJAX保存逻辑
        $.ajax({
            url: '你的时间保存接口',
            method: 'POST',
            data: {
                time: selectedTime,
                // 示例：从td的data属性获取数据ID
                id: $this.closest('td').data('id')
            },
            success: function() {
                $textSpan.text(selectedTime);
                $this.closest('.starttime_dd').hide();
                $textSpan.show();
            }
        });
    });
    
    // 点击显示timepicker的逻辑
    $(".starttime_text").click(function(){
        $(this).hide();
        $(this).siblings(".starttime_dd").show().find('.starttime').focus();
    });
});

关键细节提示 #

• 避免重复初始化：用data('timepicker')判断输入框是否已经初始化过timepicker，防止多次绑定事件；
• 数据标识：建议给你的<td>添加data-id="<?php echo $customer['id']; ?>"属性，这样AJAX请求时能明确知道要更新哪条数据；
• 状态切换：AJAX成功后一定要把选中的时间同步回原有的<span>，并切换显示状态，保证页面显示一致性。

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