jQuery刪除只AJAX調用後的第二次點擊

我有兩個div每個都有一個鏈接列表，當一個鏈接被點擊時，一個AJAX調用是附加一些JSON數據到一個單獨的div。在追加數據的同時，我希望div能夠隱藏/移除剛剛點擊的鏈接的鏈接。jQuery刪除只AJAX調用後的第二次點擊

還有一個第三個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(); 
});

來源

2017-01-03 Callum N-D

備查，沒有理由做'$（元素）.on'，它已經是一個jQuery對象，所以你可以做'element.on '。只是一個指針，不會解決你的問題。 – epascarello

謝謝你的指針，它正確注意到 –

你參考，你比Ajax調用的結果追加到

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

而且這裏的問題爲t的元素他實際上是刪除元素

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

刪除它們後，引用它們的代碼找不到它們。

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

來源

2017-01-03 15:25:02 epascarello

謝謝，這使得很多的意義，我應該已經意識到。我現在唯一的問題是，當我加載頁面時，需要第二次點擊'.panel-close'來清空包含數據的div並顯示包含div的列表。之後，它工作正常。 –

jQuery刪除只AJAX調用後的第二次點擊

回答

相關問題