克隆div中的daterangepicker无法正常工作，求技术解决方案

你的问题核心出在两个地方：

• 克隆后的input和原元素id完全重复，DOM规范要求id必须唯一，导致后续$("#location_daterange_")只会选中第一个原始元素，克隆出来的新元素根本没被初始化daterangepicker。
• 克隆仅复制DOM结构，daterangepicker的JS实例和事件绑定不会被克隆，新元素自然没有交互逻辑。

修改后的完整代码 #

var $div = $('div[id^="divSession"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
// 克隆时不复制事件（原事件绑定针对旧id，复制无意义）
var $divSession = $div.clone(false).prop('id', 'divSession' + num ).appendTo('#tabbed3_content');

// 定位克隆div里的input，生成唯一id
var $newInput = $divSession.find('#location_daterange_');
var newInputId = 'location_daterange_' + num;
$newInput.prop('id', newInputId);

// 给新input重新初始化daterangepicker并绑定事件
$newInput.daterangepicker({
    drops: 'up', 
    opens: 'left', 
    timePicker: true, 
    timePicker24Hour: true, 
    autoUpdateInput: false, 
    locale: {format: 'DD/MM/YYYY HH:mm'}
})
.on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY HH:mm') + ' - ' + picker.endDate.format('DD/MM/YYYY HH:mm'));
})
.on('cancel.daterangepicker', function() {
    $(this).val('');
});

关键改动说明 #

1. 唯一id处理：给克隆后的input生成带编号的唯一id，彻底避免DOM中id冲突，确保选择器能精准定位新元素。
2. 重新初始化插件：克隆完成后，单独定位新div内的input，重新调用daterangepicker()初始化插件，同时绑定apply和cancel事件。
3. 克隆时不复制事件：使用clone(false)替代默认的clone(true)，原元素的事件绑定针对旧id，复制过来无效，重新绑定更可靠。

另外建议你把原始input的id也改成带编号的形式（比如location_daterange_1），后续克隆的id规则更统一，从根源避免id重复问题。

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