如何检查元素是否已初始化 jQuery UI 小部件（滑块、日期选择器等）

Question

滑块控件有一个 destroy 方法，但显然它只能在滑块已初始化为特定元素时调用。我正在尝试找到一种方法来检测元素是否已使用滑块小部件初始化，如果是则使用 destroy 方法。

像这样：

if($('#myElm').slider() != NULL){
    $('#myElm').slider('destroy');
}

$('#myElm').slider({
   //new parameters
});

我想创建一个标志变量来检测它是否已被第一次初始化，但我确信必须有一种更优雅的方法来检查元素的 jquery 小部件的状态。

这适用于任何其他 UI 小部件，例如日历： https://api.jqueryui.com/datepicker/#method-destroy

if($('#myElm').datepicker() != NULL){
   $('#myElm').datepicker("destroy");
}

或制表符 (https://api.jqueryui.com/tabs/#method-destroy)

if($('#myElm').tabs() != NULL){
   $('#myElm').tabs( "destroy" );
}

我相信所有的Widget都有销毁方法。

Answer 1

您正在寻找实例方法：

instance() Returns: Object

Retrieves the slider's instance object. If the element does not have an associated instance, undefined is returned.

查看更多：https://api.jqueryui.com/slider/#method-instance

if($('#myElem').slider("instance") != undefined){
  $('#myElem').slider("destroy");
}

Datepicker 是小部件中的害群之马，文档没有显示 instance，因此您可以查找 .data() 或 widget。

var dtp = $(".selector").data("ui-datepicker");
if(dtp.length){
  $(".selector").datepicker("destroy");
}

Answer 2

@Twisty 提供了很好的解决方案，但我发现这是最优雅的

if (typeof $('#myElm').slider() !== "undefined") {
    $('#myElm').slider("destroy");
}

这适用于任何其他方法。

if (typeof $('#myElm').datepicker() !== "undefined") {
    $('#myElm').datepicker("destroy");
}

if (typeof $('#myElm').tabs() !== "undefined") {
    $('#myElm').tabs("destroy");
}

如何检查元素是否已初始化 jQuery UI 小部件（滑块、日期选择器等）

How to check if an element has a jQuery UI widget initialized (slider, datepicker, etc)

javascript

jquery

jquery-ui

slider