javascript - JQuery UI 可选择 + 动态列表

Question

我的问题:我动态生成列表，并且我想让它们可供选择。

例如:

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

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

因此，列表无法选择

我尝试过:

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

但我收到此错误:

Error: cannot call methods on the selectable prior to initialization; attempted to call method 'refresh'

Answer 1

最初在第一种情况下，列表可能不存在于 DOM 中，并且您在其上调用 selectable ，但这是无效的。在第二种情况下，您使用参数调用 selectable 而无需初始化。所以这会引发错误。解决方案是在将列表附加到 DOM 后初始化可选择项，然后在必要时使用刷新来调用它。我为演示创建了一个 fiddle 。在 fiddle 中，我在将列表附加到 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/