javascript包含的文件在AJAX重新加载后消失了 [英] javascript included files are gone after AJAX reload

问题描述

我有一个页面，其中通过JQUERY Ajax调用刷新DIV，但是随后我丢失了包含在首页"页面中的javascript代码.我是否需要将它们包括两次?在我看来这对性能不利，因为您必须在javascript已经在客户端页面上时再次加载它.如何包括文件，以便在Ajax刷新后也可以使用它们

$(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);
    }       
});
});
});

包括在主页上

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

解决方案

应该在类标识符中使用on，而不是在JS中使用click，因为这将适用于以后通过AJAX添加的元素.

所以代替:

$("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

尝试类似的东西:

$(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

您可以在以下问题中阅读它:为什么要使用jQuery on()而不是click()

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>

解决方案

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()

这篇关于javascript包含的文件在AJAX重新加载后消失了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！