Question

I have a page in which I refresh a DIV by a JQUERY Ajax call, but I then lose al the javascript code that I included in the “head” page. Do I need to include them twice? Looks to me that’s not good for the performance, because you have to load the javascript again while it is on the client page already. How to include the files so that they are also available after Ajax refresh

$(document).ready( function() {
    $("#prijzen_huidige_jaar").submit(function(event) {    
    /* stop form from submitting normally */    
    event.preventDefault();      
    $.ajax({
    type:"POST",
    url:"prijzen_huidige_jaar_test.php",
    cache: false,                   
    data: $("#prijzen_huidige_jaar").serialize(),
    success:function(data){
        $("#test").replaceWith(data);
    }       
});
});
});

include in the main page:

<script type="text/javascript" src="https://localhost/include_bestanden/javascript/prijzen.js"></script>

Answer 1

Instead of using click in your JS, you should use on with class identifiers, as this will apply to elements added later via AJAX.

So instead of:

$("input[name$='vraag_afwijkende_prijzen']").click(function(){          
    if($(this).val() == 1){
        $("#instructie_afw_prijzen_tekst").html(vraag4_ja);
        $("#afwijkende_prijzen_vak").show('slow');
        $("#afwijkend_1").show('slow');
    }
    //etc

Try something like:

$(document).on("click", ".vragen-radio", function() {
     if ($(this).attr("name") == 'vraag_afwijkende_prijzen' && $(this).val() == 1) {
        $("#instructie_afw_prijzen_tekst").html(vraag4_ja);
        $("#afwijkende_prijzen_vak").show('slow');
        $("#afwijkend_1").show('slow');
     }
     //etc

You can read about it in this question: Why use jQuery on() instead of click()