Adding jQuery UI slider to dynamically generated element?

Question

So, I am adding list items to the list using .append (). In the added div element, I need to attach a jQuery Slider widget. Not sure if I need to use .on () or something like that. FWIW, you can add an unlimited number of li, so I use the class for 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 item is actually added. I think. In this example, I just linked the click event because I don't have a 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); }); 

Answer 2

just u can re-call "$ ('. cycleDuration'). slider ();" after each addition of list elements that will bind the added class elements to this function.