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调用后的第二次点击

回答

相关问题