Question

Dojo seems to have a useful feature in that it can setup event handlers and default options, etc for Dijit.form elements as it is inserting it into the DOM.

For example, Dojo:

var slider = new dijit.form.HorizontalSlider({
name: sliderContainerId+'_slider',
value: sliderValue,
minimum: sliderMax,
maximum: sliderMin,
onChange: function(value){
// some event handling logic
}
}, sliderContainerId);


However, the jQuery UI Slider traditionally is applied to DOM elements that already exist:


$( sliderContainerId ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});


I need to be able to ‘programmatically’ create new Sliders (and other form elements), but I’m not sure how that could be achieved with the way jQuery is structured? Maybe I’m missing something obvious here….

MTIA

Answer 1

jQuery will absolutely let you create new elements on the fly. $("<div>").appendTo(".wrapper") will create a new div element and add it to the element with id wrapper. In a larger example:

$("<div>").appendTo('.wrapper').slider({
    value:100, min: 0, max: 500, step: 50,
    slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); }
});