Выбор интерфейса JQuery + динамический список

Question

Выбор интерфейса JQuery + динамический список

0

Моя проблема: я генерирую свои списки динамически, и я хочу сделать их доступными.

Например:

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

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

В результате списки не могут быть выбраны

Я пытался:

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

Но я получаю эту ошибку:

Ошибка: не может вызывать методы для выбора до инициализации; попытался вызвать метод 'refresh'

Vilix 02 май 2014, в 05:28

Источник

Теги:

javascript

jquery

dynamic

jquery-ui

jquery-ui-selectable

2 ответа

0

Вам нужно вызвать функцию append в готовом виде.

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

keypaul 02 май 2014, в 08:11

Ещё вопросы

K K · Accepted Answer · 2014-05-02T08-02-00.000Z

Могут быть возможности, которые первоначально в первом случае список отсутствует в DOM, и вы вызываете его по выбору, что не имеет никакого эффекта. Во втором случае вы вызываете 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/

Возможно, вы захотите добавить строку, чтобы очистить контейнер, прежде чем добавлять новый список. Динамически предполагает, что контейнер будет добавляться снова и снова.