JQuery UI 可选+动态列表答案

【问题标题】：JQuery UI selectable + dynamic listJQuery UI 可选+动态列表
【发布时间】：2014-05-02 02:57:01
【问题描述】：

我的问题：我动态生成我的列表，我想让它们可选择。

例如：

function gen() {
    //list generation
    $('#blank').append(listHtml);
}

$(function() {
    $('.mylist').selectable();
});

因此，列表不可选择

我试过了：

$('#blank').append(listHtml).selectable('refresh');

但我收到此错误：

错误：在初始化之前无法调用可选对象上的方法；试图调用方法“刷新”

【问题讨论】：

标签： javascript jquery jquery-ui dynamic jquery-ui-selectable

【解决方案1】：

有可能最初在第一种情况下，列表不存在于 DOM 中，而您在其上调用 selectable，这是没有效果的。在第二种情况下，您在没有初始化的情况下使用参数调用 selectable。所以这会引发错误。解决方案是在列表附加到 DOM 后初始化可选对象，然后在必要时使用刷新调用它。我为演示创建了一个小提琴。在小提琴中，我在将列表附加到 DOM 后初始化了可选择项。

$(document).ready(function () {
 $(document).on('click', '.add', function () {
    var listHTML = '<ol class="selectable"><li class="ui-widget-content">Item 1</li><li class="ui-widget-content">Item 2</li><li class="ui-widget-content">Item 3</li><li class="ui-widget-content">Item 4</li><li class="ui-widget-content">Item 5</li><li class="ui-widget-content">Item 6</li><li class="ui-widget-content">Item 7</li></ol>';
    $('.container').append(listHTML);
    $(".selectable").selectable();
    return false;
 });
});

链接：http://jsfiddle.net/lotusgodkk/GCu2D/66/

【讨论】：

在添加新列表之前，可能需要添加一行来清除容器。动态建议容器将一遍又一遍地附加。

【解决方案2】：

你需要在准备好的时候调用你的追加函数。

function gen() {
   //list generation
   $('#blank').append(listHtml);
}

$(function() {
   gen();
   $('.mylist').selectable();
});

如果您不能在准备好的情况下使用调用 gen()。也许一个解决方案可以是放置一个 timeOut 事件检查 .mylist 是否存在，然后将 selectable() 添加到它。像这样的

$(function() {
    checkList();

});

function checkList(){
    if($('.mylist').lenght > 0){
        $('.mylist').selectable();
    }else{
        setTimeout(function(){checkList;},500);
    }
}

【讨论】：