apply.daterangepicker事件失效求助：点击应用按钮无法触发函数

嘿，我来帮你搞定这个问题～你是不是遇到了点击daterangepicker的「应用」按钮时，绑定的apply.daterangepicker事件完全没反应的情况？别急，咱们先看看你的代码情况：

你的现有代码 #

HTML代码：

<input type="text" class="form-control date-picker" id="duration" name="daterange" >

JS代码：

$(function () { 
  $('input[name="daterange"]').daterangepicker({ 
    "showWeekNumbers": true, 
  }); 
}); 
$('#duration').on('apply.daterangepicker', function (ev, picker) { 
  alert('apply clicked!'); 
}); 

问题出在哪？ #

核心问题是事件绑定的时机不对！你把apply.daterangepicker的事件绑定代码放在了$(function(){})外面，而$(function(){})是DOM完全就绪后才会执行的代码块——也就是说，当你的事件绑定代码运行时，daterangepicker还没完成初始化呢，自然监听不到这个专属事件。

两种解决办法 #

方法一：把事件绑定和初始化放在一起

直接在daterangepicker初始化后链式绑定事件，确保绑定动作在插件初始化完成后执行：

$(function () { 
  $('input[name="daterange"]').daterangepicker({ 
    "showWeekNumbers": true, 
  }).on('apply.daterangepicker', function (ev, picker) { 
    alert('apply clicked!'); 
    // 这里可以添加你需要执行的其他逻辑
  }); 
}); 

方法二：使用事件委托（适合动态生成的元素）

如果你的日期选择器是动态添加到页面中的，或者想更灵活，可以用事件委托的方式，把事件绑定到父级（甚至document）上：

$(function () { 
  $('input[name="daterange"]').daterangepicker({ 
    "showWeekNumbers": true, 
  }); 

  // 委托给document监听事件
  $(document).on('apply.daterangepicker', '#duration', function (ev, picker) { 
    alert('apply clicked!'); 
  }); 
}); 

这样修改后，再点击「应用」按钮，就能正常触发你想要的函数啦～

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