У меня есть два divs со списком ссылок, когда нажимается ссылка на вызов AJAX, который добавляет некоторые данные JSON в отдельный div. В то же время, когда данные добавляются, я хочу, чтобы div со ссылками, где была нажата ссылка, которая была скрыта/удалена.jQuery удаляет только работу над вторым кликом после вызова AJAX
Существует третий div с закрываемым классом «панель-закрытие», который удаляет 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();
});
будущее, нет никаких причин, чтобы сделать '$ (элемент) .on', это уже объект JQuery, так что вы можете просто сделать' element.on '. Просто указатель, не собирающийся решать вашу проблему. – epascarello
Спасибо за указатель, это должным образом отмечено –