我有两个div .curation-contents-list和.film-contents-list,每个div都有一个链接列表,当点击一个链接时,会发出一个AJAX调用,它将一些JSON数据附加到一个单独的div .article-container和.project-container。同时,数据附加div,其中隐藏了刚刚单击的链接的链接。

还有另一个可以单击类.panel-close的div,它会删除刚刚附加数据的div,并使包含链接的div再次出现。所以一切都恢复到原始状态

问题是需要再次点击.panel-close div才能触发jQuery中的.empty()和.show()函数。一旦完成这个,jQuery第一次按原样运行。任何有关此事的帮助将不胜感激。

我的HTML基本设置:

的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();

});

ajax empty,jQuery empty仅在AJAX调用后的第二次单击时起作用相关推荐

  1. Comet 反Ajax: 基于jQuery与PHP实现Ajax长轮询(LongPoll)

    传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据.种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求. 反转 ...

  2. 嵌套的json ajax,通过jquery或javascript通过AJAX读取嵌套的JSON并输出到表中

    我真的很想有一个快速便捷的方法来遍历JSON中的多个记录,每个记录都有潜在的深层嵌套.我只想输出到表. 我不确定$ .each()或$ .ajax()成功的javascript方法需要通过functi ...

  3. MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

  4. 利用ajax赋值,jquery利用async在ajax中给全局变量赋值

    var bool_=false; function set_state(url){ $.ajax({ type:'get', url:url, data:'', dataType:'html', as ...

  5. ajax用jquery怎么实现,ajax使用jquery的实现方式

    1.jquery的ajax方法. $("#ajaxbtn").click(function(){ $.ajax({ url:"json.do", beforeS ...

  6. JQuery(三)-- AJAX的深入理解以及JQuery的使用

    HTTP HTTP http: 超文本传输协议.特点:  简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...

  7. ajax通过什么实现,ajax(通过jQuery实现)

    使用jQuery实现ajax相对来说方便一点,看w3cschool有几种实现的方法,我就总结一下自己以后会用到的几种方法 $.ajax方法: $.ajax方法里面有很多个参数可以使用,但我这里就写自己 ...

  8. ajax在jQuery的应用,Ajax在jQuery中的应用($.ajax()方法)

    Ajax() 方法 $.ajax() 中的参数及使用方法 在jQuery中,$.ajax() 是最底层的方法,也是功能最强的方法.$.get().$.post().$.getScript().getJ ...

  9. 如何快速入门Ajax(学习笔记)—— 原生ajax、jQuery、axios

    如何快速入门Ajax 1. 服务器的基本概念 客户端与服务器 URL地址 网页中如何请求数据 资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...

最新文章

  1. 博客园出现了奇怪的cookie问题
  2. Python基础技术点和常见错误
  3. Python入门学习笔记(2)
  4. 各种机器学习的应用场景分别是什么
  5. 机顶盒系统升级服务器地址,网络机顶盒怎么升级?详细教程分享
  6. 电子设计大赛-室内可见光定位装置
  7. CKA认证考题+解析
  8. 永洪科技怎么样_「永洪科技」北京永洪商智科技有限公司怎么样? - 职友集
  9. CSS / 清除浮动+切图+属性书写顺序+页面布局思路
  10. 绿盟科技网络安全攻防实验室安全研究员廖新喜:Java JSON 反序列化之殇
  11. 在JavaScript中没有二维数组的概念
  12. 水利水电安全员考试多选练习题库(8)
  13. 所有毕业生的论文都要查重吗?
  14. Flip Game(枚举)
  15. windows模拟微信小程序_微信小程序的开发环境搭建(Windows版本)
  16. Spring bean的自动装配
  17. Bloom Filter与Cuckoo Filter
  18. Redis集群运维与核心原理(哨兵选举、集群选举等)剖析
  19. 负和、零和与正和(博弈论的诡计)
  20. 局域网网盘 构建局域网网盘

热门文章

  1. 如何保护你的 Python 代码—— 定制 Python 解释器
  2. python:直接插入和简单选择排序
  3. python实现素数筛选法_从零开始学Python系列-第6讲:循环结构
  4. mysql语句的执行顺序_SQL语句完整的执行顺序(02)
  5. 如何解决 linux socket TIME_WAIT 过多造成的问题(SYN、ACK、FIN、MSL、RST含义)netstat查看TCP连接数命令
  6. VS远程开发(远程调试)编译报错:对‘xxx’未定义的引用(设置库依赖顺序)(已解决)pthread(项目-->属性-->链接器-->输入-->库依赖项)
  7. python PyQt5如何绘制矩形框?(画框/绘框)
  8. python 文件操作 os.listdir() 遍历文件
  9. 深度学习训练模型中的 train from scrath 是什么意思?(247)
  10. java数字转大写 其他报异常_【踩坑系列】使用long类型处理金额,科学计数法导致金额转大写异常...