无法访问daterangepicker中左侧嵌套select元素，求解决方法

我之前也碰到过类似的daterangepicker组件元素定位和事件绑定的坑，给你几个实用的排查和解决思路：

1. 简化并验证选择器的准确性 #

你原来的选择器太冗长，可能因为组件DOM结构的细微变化（比如中间多了一层容器）导致匹配失败。先试试简化选择器，在浏览器控制台执行以下代码，确认是否能精准定位到目标元素：

$('.calendar.left .hourselect')

如果返回的jQuery对象长度为1，说明选择器没问题；如果是0，那就是定位路径错了，需要重新检查DOM结构（可以用浏览器开发者工具的元素选择器直接点击目标hourselect，看它的父级类名是否正确）。

2. 调整事件委托的方式与时机 #

daterangepicker的日历元素是动态生成的，有时候事件绑定早于元素渲染，就会失效。你可以两种方式优化：

方式一：绑定到更稳定的静态父元素+简化选择器 #

把事件委托到页面加载时就存在的父元素（比如body或者你的daterangepicker容器），同时用简化的选择器：

$('body').on('change', '.calendar.left .hourselect', function() {
  alert(this.value);
  console.log(this);
});

方式二：监听组件的show事件，在元素渲染后绑定 #

daterangepicker提供了show.daterangepicker事件，当组件弹出时触发，这时候日历元素已经生成，直接绑定事件更可靠：

// 替换成你的daterangepicker触发元素选择器，比如#daterange
$('#daterange').on('show.daterangepicker', function() {
  // 先移除可能存在的旧事件，避免重复绑定
  $('.calendar.left .hourselect').off('change').on('change', function() {
    alert(this.value);
    console.log(this);
  });
});

3. 排查是否有事件冒泡被阻止 #

有些组件会自带事件处理逻辑，可能阻止了change事件的冒泡，导致你的委托事件无法触发。这种情况下，可以尝试监听click或者input事件（如果是下拉选择后触发）：

$(document).on('click', '.calendar.left .hourselect option:selected', function() {
  alert($(this).val());
  console.log($(this).parent()[0]);
});

4. 利用组件自带的事件钩子 #

如果以上方法都不行，建议查看daterangepicker的官方文档，看看有没有提供监听时间选择变化的钩子事件。比如组件的apply.daterangepicker会在用户确认选择时触发，但如果你需要实时监听小时变化，前面的方法应该足够满足需求。

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