首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在用AJAX删除项目时重新加载jQuery砌体?

如何在用AJAX删除项目时重新加载jQuery砌体?
EN

Stack Overflow用户
提问于 2015-02-12 06:53:26
回答 3查看 2.3K关注 0票数 0

更新:

这是我的CSS:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 #masonry-container {
   margin: 0 auto;
}

.box {
   width: 50%;
   margin-top: 30px;
}

我正在使用Rails 4、Bootstrap和砖石-钢轨宝石。我在资产/javascipts/application.js中为jQuery砌体安排了以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function(){
  $('#masonry-container').masonry({
    itemSelector: '.box',
    isFitWidth: true
  });
});

var masonryUpdate = function() {
    setTimeout(function() {
        $('#masonry-container').masonry();
    }, 200);
}

$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

它不起作用,但是当我尝试用AJAX删除一个项目时,不会更新。以下是我的看法/项目/破坏. is:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.deleting').bind('ajax:success', function() {  
    $(this).closest('.poista').fadeOut();
});

在上面的代码示例之后,我如何才能强制砖石工重新加载?由于某种原因,.ajaxComplete(masonryUpdate)没有被触发?

如果我刷新页面,它会重新加载,但这就消除了使用AJAX和破坏操作的意义.

为了进一步解释这一点,首先我的网站是这样的:

但是,当我删除div时,砖石不会重新加载;它最后看起来是这样的,在div以前所在的位置有一个空空间:

在AJAX破坏操作之后,我如何重新加载砖石呢?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-16 03:16:23

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.deleting').bind('ajax:success', function() {  
    $ele = $(this).closest('.poista');
    $ele.fadeOut(200, function(){
          $("#masonry-container").masonry( 'remove', $ele ).masonry();
    });

});
票数 1
EN

Stack Overflow用户

发布于 2015-02-16 02:39:34

您不必销毁砌体,只需在ajax操作之后重新初始化它,然后使用以下方法重新加载项:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$container.masonry('reloadItems');
票数 0
EN

Stack Overflow用户

发布于 2015-02-16 03:12:12

编辑

我正在浏览你的另一个问题,我想我想出了一个更好的解决方案。实际上,您的问题可能与下面的一行有关。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ajaxComplete(masonryUpdate);

ajaxComplete调用带有特定参数的集合处理程序函数时,最好是使用匿名函数来调用masonryUpdate。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ajaxComplete(function(event, xhr, settings) {
  masonryUpdate();
};

这意味着您不必使用$('.deleting').bind函数来处理删除操作。

实际上,你可以在你把物品褪色后再调用砖石。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.deleting').bind('ajax:success', function() {  
  $(this).closest('.poista').fadeOut();
  $('#masonry-container').masonry();
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28480578

复制
相关文章
链表----在链表中添加元素详解
1.2对于链表来说,若想访问链表中每个节点则需要把链表的头存起来,假如链表的头节点为head,指向链表中第一个节点,如图:
wfaceboss
2019/04/08
2.7K0
链表----在链表中添加元素详解
在excel图表上添加数据标签
在Excel2013中,选中柱子右键---添加数据标签-----添加数据标签(B),如下图:
演化计算与人工智能
2020/08/14
2K0
在excel图表上添加数据标签
在Ubuntu 20.04上添加swap交换空间
很多认为swap是物理RAM内存已满时才使用swap。 这是一个错误的认知,因为内核会将非活动页面将从内存移动到交换空间swap。
小锋学长生活大爆炸
2022/09/08
3.9K0
在Ubuntu 20.04上添加swap交换空间
在 Ubuntu 上如何添加 Apt 软件源
当使用 Ubuntu 软件中心或者从终端命令行输入apt或者apt-get安装软件包时,软件包被从一个或者多个软件源下载下来。一个 APT 软件源是一个网络服务器或者一个本地目录,它包含 deb 软件包和可以被 APT 工具读取的元文件。
雪梦科技
2020/05/09
23.3K0
在 Ubuntu 上如何添加 Apt 软件源
jQuery - 添加元素
jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。
陈不成i
2021/07/22
2.6K0
在元素上写事件和addEventListener()的区别[通俗易懂]
语法: element.addEventListener( type , listener , useCapture ) – – 添加事件监听 – – type: 事件类型字符串,不使用“on”前缀 – – callback:事件处理程序(回调函数) – – useCapture:可选参数,是否使用事件捕获的方式处理事件。不传递时,默认为false,表示不使用事件捕获(使用事件冒泡),如果需要显示事件捕获,则显示传递true。
全栈程序员站长
2022/09/18
1.2K0
javascript动态添加元素
<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”Generator” content=”EditPlus®”> <meta name=”Author” content=””> <meta name=”Keywords” content=””> <meta name=”Description” content=””> <title>Document</title> </head> <body> <script> function addLiElement() { var liElement = document.createElement(‘li’); //liElement.innerHTML = ‘这是新增的li元素’; var labelElement = document.createElement(‘label’); var inputElement = document.createElement(‘input’); labelElement.innerHTML = ‘单号:’ inputElement.setAttribute(‘name’, ‘expressNumber’); liElement.appendChild(labelElement); liElement.appendChild(inputElement); var ulElement = document.getElementById(‘myid’); ulElement.appendChild(liElement); } </script> <ul id=”myid”> <li>aa</li> <li>bb</li> </ul> <p> <button onClick=”addLiElement();”>动态添加标签</button> </p> </body> </html>
全栈程序员站长
2022/06/25
1.9K0
javascript 如何添加元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152086.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
1K0
原生js添加元素
今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。
全栈程序员站长
2022/06/25
8.9K0
html页面添加元素
Title table,td,th{ border: 1px solid slateblue ; } div{ vertical-align: center; text-align: center; } $(function (){ var $delete=function (){ var $parent = $(this).parent().parent();
await
2021/09/23
6.4K0
js 动态添加元素
该例子的样式用的是easyui的样式,看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" style="margin-bottom:5px;"> <label>url:</label> <input id="url" name="url" class="easyui-textbox" style="width: 260px" > 小标题: <input id="url_title" name="url_titl
黄啊码
2020/05/29
19.7K0
js 动态添加元素
vue 数组添加元素
3、splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。
wust小吴
2019/11/05
5.4K0
js添加元素方法
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152064.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
8.5K0
C语言编程: 在BMP图片上添加图片水印
gcc 版本 4.4.6 20120305 (Red Hat 4.4.6-4) (GCC)
DS小龙哥
2022/01/07
4.6K0
C语言编程: 在BMP图片上添加图片水印
js操作DOM在父元素中的结尾添加子节点注意
所以js是不能直接传入字符串的,但是jquery的append可以直接传入html字符串。
蓓蕾心晴
2018/10/25
9.9K0
js操作DOM在父元素中的结尾添加子节点注意
原生js动态添加元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152106.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
6.8K0
封装数组之添加元素
在上一小节中,我们对数组进行了一个基本的封装,该小节中,我们在上一次基础上,新增往数组添加元素的方法:
wfaceboss
2019/04/08
1.1K0
Python 列表如何添加元素
添加前: 'my', 'name', 'is', 'mark', 'age', 18
用户8418197
2022/02/13
1.8K0
点击加载更多

相似问题

Leadtools没有足够的内存

26

纱线MapReduce没有足够的内存

12

Malloc没有分配足够的内存

10

删除行没有足够的内存

111

图片图形用户界面C# (使用图片框)

31
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文