如何实现点击事件重新绑定SyncFusion DatePicker到HTML元素避免重复初始化

核心逻辑是每次触发点击事件时，先检查是否已有DatePicker实例存在，若存在则先调用destroy()方法销毁实例、清空原有绑定，再执行新的初始化逻辑，避免重复挂载。

完整可运行代码 #

JS代码 #

var datepicker = null;
$("#datepicker").hide();

$("#click").click(function(){
  // 先销毁已存在的实例，避免重复绑定
  if(datepicker) {
    datepicker.destroy();
    // 可选：清空input内容，根据业务需求决定是否保留
    $("#datepicker").val('');
  }
  $("#datepicker").show();
  datepicker = new ej.calendars.DatePicker({ width: "255px" });
  datepicker.appendTo('#datepicker');
});

HTML代码（原有逻辑无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

 <input id="datepicker" type="text">
 <a id="click">Click Here</a>

更严谨的可选校验方案 #

如果担心全局变量存储的实例丢失，可以直接通过ej2内置API从DOM节点获取已绑定的组件实例做校验：

$("#click").click(function(){
  const datepickerDom = document.getElementById('datepicker');
  // 直接从DOM元素获取已绑定的DatePicker实例
  const existInstance = ej.base.getComponent(datepickerDom, 'datepicker');
  if(existInstance) {
    existInstance.destroy();
    $(datepickerDom).val('');
  }
  // 后续初始化逻辑不变
  $(datepickerDom).show();
  datepicker = new ej.calendars.DatePicker({ width: "255px" });
  datepicker.appendTo('#datepicker');
});

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