JQuery пустой работает только на второй клик после вызова AJAX

Question

У меня есть две дивы .curation-contents-list и .film-contents-list каждый со списком ссылок, если ссылка щелкали вызов AJAX производится который добавляет некоторые данные в формате JSON в отдельный дивы .article-container и .project-container. В то же время, когда данные добавляются, div со ссылками, где только что нажатая ссылка скрыта.

Существует еще один div с классом .panel-close, который можно щелкнуть, который удаляет div с только что добавленными данными и снова возвращает div, содержащий ссылки. Так что все возвращается в исходное состояние

Проблема заключается в том, что она занимает второе нажмите на .panel-close DIV выстрелить в .empty() и .show() функции в моей JQuery. Как только это было сделано в первый раз, jQuery работает так, как должно. Любая помощь по этому вопросу была бы весьма признательна.

Мой является основной набор из моего 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

$('.load-article').on('click', function(e) { 
    e.preventDefault(); 
    var target = $('.article-container'); 
    var url =$(this).data('page') + '.json'; 

    $.get(url, function(data) { 
    $('.curation-contents-list').hide(); 
    $(target).append(data); 
    $("body").addClass("load-article-is-open"), 
    $(this).animate({ 
     scrollTop: 0 
    }, 300, "easeInOutExpo") 
    }); 
}), 

$('.load-project').on('click', function(e) { 
    e.preventDefault(); 
    var target = $('.project-container'); 
    var url =$(this).data('page') + '.json'; 

    $.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-list').show(); 
    $('.film-contents-list').show(); 
    $('.article-container').empty(); 
    $('.project-container').empty(); 
}); 

Answer 1

Я согласен с Энди, что вы должны использовать полуколоны вместо запятых для окончаний строки. Однако, скорее всего, причиной ваших проблем является пропущенная зависимость от библиотеки jQuery Easing. Проверьте консоль на наличие ошибок, таких как

easeInOutExpo is not a function

, которые указывали бы, что вы пропали без вести the jQuery Easing library.

Просто для проверки концепции, here's a working Fiddle

И соответствующие изменения в полу-колоны:

$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open"); 
$(".curation-panel").animate({ 
    scrollTop: 0 
}, 300, "easeInOutExpo"); 
$(".film-panel").animate({ 
    scrollTop: 0 
}, 300, "easeInOutExpo"); 

Пожалуйста, обратите внимание, что я удалил цепочку из removeClass и вместо вытеснен вместо этого он имеет разнесенный список. Нет причин повторно переадресовывать эту функцию каждый раз, когда вы хотите удалить класс из того же элемента.

Answer 2

Это, кажется, сделать трюк, дать ей идти. изменили анимацию в scrolTop, положить в полу-колонов в нужных местах

$(".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").scrollTop(300, "easeInOutExpo"); 

$(".film-panel").scrollTop(300, "easeInOutExpo"); 

$('.curation-contents-list').show(); 
$('.film-contents-list').show(); 
$('.article-container').empty(); 
$('.project-container').empty(); 
}); 

можно также упростить код, выполнив:

$(".panel-close").click(function() { 

$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open"); 


$(".film-panel, .curation-panel").scrollTop(300, "easeInOutExpo"); 

$('.curation-contents-list, .film-contents-list').show(); 

$('.article-container, .project-container').empty(); 

}); 

(второй метод не тестировался)