ajax删除第二次,jQuery删除仅适用于AJAX调用后的第二次单击

我有两个div，每个div都有一个链接列表，当点击链接时，会发出一个AJAX调用，它将一些JSON数据附加到一个单独的div。在附加数据的同时，我希望div具有链接，其中刚刚单击的链接被隐藏/删除。

有一个第三个div，可以单击“panel-close”类，它会删除刚刚附加数据的div，并使包含链接的div再次出现。所以一切都恢复到原始状态

我遇到的问题是，一旦包含数据的div被删除，有时包含链接的div不再出现，有时它会在第二次单击面板关闭div时发生，有时JSON数据不会点击链接后再次附加。

我的HTML基本设置：

我是一个Jquery noob，我可能采取了完全错误的方法，但这是我的jquery代码：

$(function(){

var element = $('.load-article');

var url = element.data('page') + '.json';

var target = $('.article-container');

$(element).on('click', function(e) {

e.preventDefault();

$.get(url, function(data) {

$('.curation-contents-list').hide();

$(target).append(data);

});

$("body").addClass("load-article-is-open"),

$(this).animate({

scrollTop: 0

}, 300, "easeInOutExpo")

});

}),

$(function(){

var element = $('.load-project');

var url = element.data('page') + '.json';

var target = $('.project-container');

$('.load-project').on('click', function(e) {

e.preventDefault();

$.get(url, function(data) {

$('.film-contents-list').hide();

$(target).append(data);

});

$("body").addClass("load-project-is-open"),

$(this).animate({

scrollTop: 0

}, 300, "easeInOutExpo")

});

}),

$(".panel-close").click(function() {

$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),

$(".curation-panel").animate({

scrollTop: 0

}, 300, "easeInOutExpo"),

$(".film-panel").animate({

scrollTop: 0

}, 300, "easeInOutExpo"),

$('.curation-contents').show();

$('.film-contents-list').show();

$('.article-container').remove();

$('.project-container').remove();

});