CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sliderdynamically-generated
Benjamin Allison
Benjamin Allison

Reputation: 2154

Adding jQuery UI slider to dynamically generated element?

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

Upvotes: 4

Views: 4759

Answers (2)

mrtsherman
mrtsherman

Reputation: 39872

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

Upvotes: 4

Bhavesh G
Bhavesh G

Reputation: 3028

simply u can re-call " $('.cycleDuration').slider(); " after every appends the list elements, that will bound added class elements to that function.

Upvotes: 2

Related Questions