Question

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

例如：

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

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

因此，列表无法选择

我试过了：

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

但是我收到了这个错误：

错误：在初始化之前无法调用selectable上的方法;试图调用方法'刷新'

Answer 1

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

$(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/

Answer 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);
    }
}

JQuery UI可选+动态列表

2 个答案: