jQuery dynamic slider

Question

Any idea why this won't work? What I'm trying to do is add some div tags dynamically and then apply them with a slider.

    $(function () {

        var testarea =  $('<div id="testarea" />');

        for (var i = 0; i < 3; i++) {
            $('<div class="testslider"></div>').appendTo(testarea);
        }

        $('#somearea').html(testarea.html());

        $(".testslider").slider({
            value: 100,
            min: 0,
            max: 500,
            step: 100,
            slide: function (event, ui) {
            }
        });
   });

html:

<div id="somearea"></div>

If I just add the div tags normally like so then its ok so I'm not too sure how to apply it dynamically.

score 2 · Accepted Answer · answered Mar 07 '13 at 00:33

2

May as well just do it in one go anyway

$(function () {
    for (var i = 0; i < 3; i++) {
        $('<div class="testslider"/>').slider({
            value: 100,
            min: 0,
            max: 500,
            step: 100,
            slide: function (event, ui) {
            }
        }).appendTo('#testarea');
    }
});

answered Mar 07 '13 at 00:33

Popnoodles

28,090
2
45
53

what if the
was also dynamic and not hard coded? – fes Mar 07 '13 at 00:45
Won't make a difference. Try it. – Popnoodles Mar 07 '13 at 00:46
Basically it'll just print out [object object] – fes Mar 07 '13 at 00:47
What will print out [object object] and where? – Popnoodles Mar 07 '13 at 00:48
I was trying to do something like this var sliderarea = $('
'); then $('
').slider({ ..... ).appendTo(sliderarea); now I want to display this sliderarea. If I use sliderarea its [object Object], so I tried sliderarea.html() but the content isn't being shown. – fes Mar 07 '13 at 00:54
Try `.appendTo(sliderarea); ` not `append(sliderarea); ` – Popnoodles Mar 07 '13 at 00:55

jQuery dynamic slider

1 Answers1