Добавление ползунка пользовательского интерфейса jQuery к динамически генерируемому элементу?

Question

Итак, я добавляю элементы списка в список, используя .append ().В добавленном элементе есть div, к которому мне нужно прикрепить виджет jQuery Slider.Не уверен, что мне нужно использовать .on () или что-то еще.FWIW, можно добавить неограниченное количество li, поэтому я использую класс для div.

В любом случае вот упрощенный фрагмент:

    $('.cycleDuration').slider();

    $cycleBlock += '<li>';
    $cycleBlock += '<div class="cycleDuration"></div>';
    $cycleBlock += '</li>';
    $('#cycles').append($cycleBlock);

Answer 1

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

http://jsfiddle.net/4vwUd/1

$('button').click( function() {
    //turn your div into a jquery object
    var $cycleBlock = $('<div class="cycleDuration"></div>');
    //bind the event
    $cycleBlock.bind('click', function() { alert(); });
    //append to the list
    $('#cycles').append('<li />').children('li:last').append($cycleBlock);
});

Answer 2

просто вы можете повторно вызвать "$ ('. CycleDuration'). Slider ();" после каждого добавления элементов списка, которые будут привязывать добавленные элементы класса к этой функции.