Adding jQuery UI slider to dynamically generated element?

Question

So I'm adding list elements to a list using .append(). Within the appended element is a div I need to attach the jQuery Slider widget to. Not sure if I have to use .on() or something. FWIW, an unlimited amount of li's can be added, which is why I'm using a class for the div.

Anyway here's a simplified snippet:

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

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

Answer 1

You will need to bind the code before the element is actually appended I think. In this example I just bound a click event because I don't have your slider code.

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