javascript - Apply a script on a html file called by Ajax -

this question has answer here:

• event binding on dynamically created elements? 18 answers

everything in title ...

i created code running on element range:

(function($){     $('.range').each(function(){         var range = $(this);         range.on('input', function(){             range.next().text($(this).val());         })         .next().text(range.val());     }); })(jquery); 

i wish works on same element called ajax.

$('.ajax-global').on('click', function(){     var param = $(this).attr('id');     $('.ajax-window').load('./ajax/' + param + '.php'); }); 

here practical example of these tags range: online example.

if call same html code via ajax, javascript not apply latter. code ajax (press "welcome stackoverflow" button).

how proceed? dilemma can not solve, , while ...

edit :

i remembered useful function: $.getscript(), i'm there:

$('.ajax-global').on('click', function(){     var param = $(this).attr('id');     // ouverture dans une fenêtre ajax généraliste :     $('.ajax-window').load('./ajax/' + param + '.php', function() {         $.getscript( "./scripts/public/scripts.js");     }); }); 

it works ... except file called reapplied entire document, whereas want limit new html elements called via ajax (in order limit bugs).

your request http://scriptura.github.io/ajax/ajax-alsa.php returns html without scripts. correctly inserted dom.

h2 class="h3">welcome stackoverflow !</h2> <p class="message-info">the following code - called via ajax - not functional time necessary because script not associated. imput type ranks should able display number in top right of slide (<a href="./#index-ranges">see working example on page</a>).</p> <form>   <fieldset>     <input type="range" name="a" min="0" max="100" step="1" value="50" class="range"/>     <output>--</output>   </fieldset> </form> 

which script executed?