javascript - jQuery remove 仅适用于 AJAX 调用后的第二次点击

Question

我有两个 div，每个 div 都有一个链接列表，单击链接时会进行 AJAX 调用，将一些 JSON 数据附加到单独的 div。在附加数据的同时，我希望带有链接的 div 隐藏/删除刚刚单击的链接。

第三个 div 的类为“panel-close”，可以单击它删除带有刚刚附加的数据的 div，并使包含链接的 div 再次出现。于是一切又回到了最初的状态

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

我的是我的 HTML 的基本设置:

<div class="curation-panel">
 <div class="curation-contents-list">
   <a class="load-article"></a>
 </div>

 <div class="article-container">
 </div>
</div>

<div class="film-panel">
 <div class="film-contents-list">
   <a class="load-project"></a>
 </div>

 <div class="project-container">
 </div>
</div>

<div class="panel-close">
</div>

我是一个 Jquery 菜鸟，我可能采取了完全错误的方法，但这是我的 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();
});

Answer 1

您引用一个元素，然后将 Ajax 调用的结果附加到该元素

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

这里的问题是你正在删除元素

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

删除它们后，引用它们的代码将找不到它们。

我想你想使用 empty() 而不是 remove()