如何在html Ajax中加载时只追加一次

Question

我从我创建的灯箱中的JSON文件加载内容。灯箱打开另一个HTML。在那个html中，我将从JSON文件加载的数据附加到各种元素。但是我只想在打开灯箱时追加一次，我该怎么办呢？

$(document).on('click', '.mch-overlay-info', function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $('#mch-overlay-content').html('');
    $('#mch-overlay').fadeIn(300);
    $('#mch-overlay-content').load(href, function() {
        showInfo(); 
    });
});

function showInfo(){

        $(".start .text3").append(data[lang]['startpage']['text3']);
        $(".start .text4").append(data[lang]['startpage']['text4']);
        $(".start .text5").append(data[lang]['startpage']['text5']);

}

Answer 1

我假设你的问题是每次点击它都会附加？两个选项：

1. 不要追加它。只需使用$().html()设置内容并替换旧内容。

2. 使用变量控制

   var hasBeenAppended = false;
   
   //etc...
   
   function showInfo(){
       if(!hasBeenAppended) {
           hasBeenAppended = true;
           $(".start .text3").append(data[lang]['startpage']['text3']);
           $(".start .text4").append(data[lang]['startpage']['text4']);
           $(".start .text5").append(data[lang]['startpage']['text5']);
       }
   
   }