How to fetch values from specific elements which are dynamically created in JavaScript

Question

I am new to Javascript and Jquery. I started making changes in business rules by Chris Powers. https://github.com/chrisjpowers/business-rules I want to add a range slider in numbers and want to add a number spinner also. I have tried using open source sliders. But the problem I faced is if I place the slider's html in plain html file then it is rendering. But since we want it dynamically generated therefore trying through javascript is not giving the required results, it just shows a blank text field.

Example: (from jquery-UI)

<div class="slider-range"></div>//this works

But if tried from javascript like:

var input = $("<div>",{"class":" slider-range rem "});
$this.after(input);

this creates a blank input text box. I thought that the supporting javascript is not read when inside another file hence I wrote in my header like:

<script>
        $(function() {
        $( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 100,
        values: [ 75, 100 ],
        slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
        });
        $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
        " - $" + $( ".slider-range" ).slider( "values", 1 ) );
        });

    </script>

it still doesn't seem to work. I apologize for my ignorance but I have tried hard to get it working. Please give me some hope.

Answer 1

I created a DEMO FIDDLE It seems to be working fine.

var input = $("<div>",{"class":" slider-range rem"});
$("#empty").after(input);

$( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 100,
        values: [ 75, 100 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

    $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) + " - $" + $( ".slider-range" ).slider( "values", 1 ) );