Apply a script on a html file called by Ajax

Question

Everything is in the title ...

I created a code running on an 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 it also works on the same element called by Ajax.

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

Here is a practical example of these tags Range: online example.

If I call the same html code via Ajax, javascript does not apply to the latter. Code with Ajax (press the "Welcome Stackoverflow" button).

How to proceed? This is a dilemma that I can not solve, and that for a while ...

EDIT :

I remembered a useful function: $.getScript(), I'm almost 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 that the file called is reapplied to the entire document, whereas I want to limit only to new html elements called via Ajax (in order to limit the bugs).

Sorry it is not clear at all what you are asking. Please include any relevant code in the question itself. — Jon P, Jun 25 '15 at 06:42
jQuery `.delegate` method might help http://api.jquery.com/delegate/ — Oleg, Jun 25 '15 at 07:06
Exact is a delegation I want to do, but I do not know how ... — Olivier C, Jun 25 '15 at 07:15

score 0 · Answer 1 · answered Jun 25 '15 at 07:04

Your request to http://scriptura.github.io/Ajax/ajax-alsa.php returns html without any scripts. It is correctly inserted into DOM.

h2 class="h3">Welcome Stackoverflow !</h2>
<p class="message-info">The following code - called via Ajax - is not functional for the time necessary because the script is not associated. The imput type ranks should be able to display a number in the top right of the slide (<a href="./#index-ranges">see a working example on this 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 would you like to be executed?

I took the Range tag as an example to my question, but in reality I would potentially be able to apply all scripts javascript file called by the web page. — Olivier C, Jun 25 '15 at 07:18

Apply a script on a html file called by Ajax

1 Answers1