jQuery removeは、AJAX呼び出し後の2回目のクリックでのみ機能します。

Question

リンクが2つあるdivがあります。リンクをクリックすると、別のdivにJSONデータを追加するAJAX呼び出しが行われます。データが追加されると同時に、私は、リンクをクリックしたばかりのリンクを隠したり削除したりしたいと考えています。

"panel-close"クラスの3番目のdivがあり、これをクリックすると、直前に追加されたデータでdivが削除され、リンクを含むdivが再び表示されます。すべて元の状態に戻る

問題があるのは、データを含むdivが削除されていることがあります。リンクを含むdivが再び表示されないことがあります。パネルの2回目のクリックで発生することもありますdivを閉じて、JSONデータがリンクをクリックした後に再び追加されないことがあります。

私は私のHTMLの基本的なセットアップです：私はjQueryのnoobのだ

<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のコードです：

$(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

あなたが

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

にAjax呼び出しの結果を追加するよりも、要素を参照し、ここでの問題をt彼は実際に要素を削除しています

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

これらを削除した後、それらを削除すると、そのコードを見つけることができません。

私はあなたがempty()なくremove()