ajax - 在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']);
       }
   
   }