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

Answer 1

您引用一个元素，而不是将Ajax调用的结果附加到

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

这里的问题是你要移除元素

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

删除它们后，引用它们的代码无法找到它们。

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

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

1 个答案: