首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么当jquery可拖动元素被移除时,我得到了错误的计数?

当jquery可拖动元素被移除时,你得到错误的计数是因为移除元素后,计数的逻辑仍然在继续执行,但此时元素已经不存在于DOM中,导致计数出错。

为了解决这个问题,你可以在移除元素之前停止计数的逻辑。可以使用unbind()方法来解绑计数的事件处理程序,或者使用off()方法来移除计数的事件处理程序。这样,在移除元素之后,计数的逻辑就不会再执行,避免了错误的计数。

以下是一个示例代码:

代码语言:javascript
复制
// 绑定计数的事件处理程序
$('#draggable').on('drag', function() {
  // 计数逻辑
});

// 移除元素之前停止计数的逻辑
$('#removeButton').on('click', function() {
  // 解绑计数的事件处理程序
  $('#draggable').unbind('drag');
  // 或者移除计数的事件处理程序
  // $('#draggable').off('drag');
  
  // 移除元素
  $('#draggable').remove();
});

在上述代码中,当点击"removeButton"按钮时,先解绑或移除计数的事件处理程序,然后再移除元素。这样就能确保在移除元素后不再执行计数的逻辑,避免错误的计数。

请注意,上述代码中使用的是jQuery的方法,如果你不使用jQuery,可以根据具体的库或框架来进行相应的操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue.Draggable 文档总结

特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2国度动画兼容 支持撤销操作 需要完全控制,可以抛出所有变化 可以和现有的...格式为简单css选择器字符串,定义哪些列表单元可以进行拖放 ghostClass: selector 格式为简单css选择器字符串,拖动列表单元时会生成一个副本作为影子单元来模拟拖动单元排序情况...排序容器是个滚动区域,拖放可以引起区域滚动 scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl...,pull:'clone拖拽回调函数’ 就是克隆意思。...newIndex: 添加后新索引 element: 添加元素 removed: 从列表中移除元素 oldIndex: 移除索引 element: 移除元素

8.8K20

从 antDesign 来窥探移动端“滚动穿透”行为

现象 直观上来说所谓 Scroll Chaining(滚动链接)通常会在两种情况下意外触发: 拖动不可滚动元素滚动背景意外滚动。...将可滚动元素拖动至顶部或者底部,继续拖动触发最近滚动祖先元素滚动。 还有另一种常见场景,我们在某个滚动元素上进行拖动元素滚动条已经到达顶部/底部。...我们在子元素区域内进行拖拽元素滚动到底部(顶部),仍然继续往下(上)进行拖动。 原理 上述两种情况相信大家也日常业务开发中碰到过不少次。...想象一下,如果你页面中每个 Modal 弹窗都使用了 useLockScroll 这个 hook ,那么页面中开启两个弹窗,当关闭一个另一个还存在总不能移除了 BODY_LOCK_CLASS 吧...这点最初也不太明白为什么这么做,所以我也去 vant 中进行了请教,详见 vant Discussions。

45920

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

拖拽对象离开目标对象触发拖动事件列表每一个拖动元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束在拖动目标上触发事件 (源元素-拖动元素):ondragstart...- 在元素开始拖动时候触发——拖动什么ondrag - 在元素拖动反复触发ondragend - 在拖动操作完成触发释放目标触发事件(目的地对象):ondragenter - 鼠标拖动对象进入其容器范围内触发此事件...ondragover - 拖动元素在目的地元素触发——放到何处ondragleave - 拖动元素没有放下就离开目的地元素触发ondrop - 在一个拖动过程中,释放鼠标键触发此事件——...进行放置针对对象事件名称说明拖动元素dragstart在元素开始拖动时候触发drag在元素拖动反复触发dragend在拖动操作完成触发目的地对象dragenter拖动元素进入目的地元素所占据屏幕空间触发...dragover拖动元素在目的地元素触发dragleave拖动元素没有放下就离开目的地元素触发整个拖拽事件触发顺序如下:dragstart-> drag -> dragenter ->

6.3K21

基于HTML5 Canvas和jQuery 画图工具实现

从输出结果可以看出,结果和我们预期并不一样。这是为什么呢?  ...那么,我们怎样才能判断当鼠标移动,鼠标键是否按下呢?...当然了,使用canvas 肯定是实现不了,这里到了一个方法,就是使用 元素模拟我们需要绘制矩形,当用户在拖动鼠标的过程中,使用DIV 显示矩形信息,一旦用户松开鼠标,那么,将此DIV...类似地,绘画直线和添加文字也是通过HTML伪装逻辑: 绘画直线,用户在画板上拖动并按下鼠标,动态地显示出一条使用HTML伪装直线,可以随着用户鼠标的移动而变化,当用户松开鼠标,对应模拟直线...HTML元素隐藏,调用javavscript绘制真正直线; 添加文字,这里使用元素 进行模拟文本输入框,当用户在画板上添加文字,可以拖动鼠标设置输入框大小,然后输入文字,

2.9K40

【JS】1724- 重学 JavaScript API - Drag and Drop API

如何使用 使用拖放 API 主要包括以下 3 个步骤: 「定义拖拽(draggable)元素」:将需要拖动元素标记为拖拽,并指定相应事件处理逻辑。...「定义可放置(droppable)元素」:将用来放置拖动元素目标区元素标记为可放置,并指定相应事件处理逻辑。...拖动 drag-source 元素,使用 event.dataTransfer.setData() 方法设置了拖动数据,而放置目标元素,执行 drop事件监听回调方法,实现被拖动元素添加到可放置元素底下...在放置目标容器上,我们使用 dragover 事件阻止默认行为并添加一些过渡样式,使用 dragleave 事件移除过渡样式,使用 drop 事件在放置目标容器中追加拖动图片元素。...拖动任务卡片时: 使用 dragstart 事件将任务名称存储在 dataTransfer 对象中; 使用 dragover 事件阻止默认行为并添加视觉反馈; 使用 dragleave 事件移除视觉反馈

24420

DOM 高级工程师不完全指南

三年前初入前端坑时候,发现了一个叫做 jQuery 宝贝,她有一个神奇 $ 函数,可以让快速选中某一个或一组 DOM 元素,并提供链式调用以减少代码冗余。...也就是说,closest 方法可以从特定 HTMLElement 向上发起查询,找到第一个符合指定 css 表达式元素(也可以是元素自身),如果找到了文档根节点还没有找到目标,就会返回 null...移除 DOM 元素 上面提到兄弟方法 insertAdjacentElement 也可以用来对已存在元素进行移动,换句话说:传入该方法是已存在于文档中元素,该元素仅仅只会被移动(而不是复制并移动...element 16: otherElement element 所包含 那么问题来了,为什么上面例子中第一行结果是20、第二行结果是10呢?...值发生改变属性名,如果不是属性变更,则返回 null previousSibling: 添加或移除元素之前兄弟节点 nextSibling: 添加或移除元素之后兄弟节点 根据目前信息

70210

jQuery 教程

大家好,又见面了,是你们朋友全栈君。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是按钮点击事件触发时会调用一个函数。 该函数在用户点击 HTML 元素执行。...; } ); focus() 元素获得焦点,发生 focus 事件。 通过鼠标点击选中元素或通过 tab 键定位到元素,该元素就会获得焦点。...方法 描述 $.Deferred() 返回一个链式实用对象方法来注册多个回调 deferred.always() Deferred(延迟)对象受理或拒绝,调用添加处理程序 deferred.done...() Deferred(延迟)对象受理,调用添加处理程序 deferred.fail() Deferred(延迟)对象拒绝,调用添加处理程序 deferred.isRejected()

17K20

DOM 高级工程师不完全指南

三年前初入前端坑时候,发现了一个叫做 jQuery 宝贝,她有一个神奇 $ 函数,可以让快速选中某一个或一组 DOM 元素,并提供链式调用以减少代码冗余。...元素局部搜索 需要查找元素,不一定每次都基于 document 去查找。开发者可以在任何 HTMLElement 上进行 DOM 元素局部搜索: ? 事实证明,每个优秀开发者都是很懒。...也就是说,closest 方法可以从特定 HTMLElement 向上发起查询,找到第一个符合指定 css 表达式元素(也可以是元素自身),如果找到了文档根节点还没有找到目标,就会返回 null...element 16: otherElement element 所包含 那么问题来了,为什么上面例子中第一行结果是20、第二行结果是10呢?...值发生改变属性名,如果不是属性变更,则返回 null previousSibling: 添加或移除元素之前兄弟节点 nextSibling: 添加或移除元素之后兄弟节点 根据目前信息

71710

jQuery 升级踩坑大全

前段时间就主导了这件事情,把公司里我们组负责项目jQuery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。...,当时还是采用jQuery 1.4.2,这次升级步子迈算是比较大。...事实上,live函数将$(selector)代理到了document元素上,这个元素是肯定存在,所以不会出现类似情况。...JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated 实践中发现,早期写代码里面,获取一个input输入表单,是怎么获取呢?...浏览器怪异模式是为了兼容老古董网页而设计,详情参考这篇文章:链接。想现在WEB程序员应该不会傻到不写DOCTYPE,也很少使用这种模式下浏览器吧。

3.8K90

不写一行代码实现mobile自动化

,参数为 True,False clickable 可点击元素,参数为 True,False longClickable 长按元素,参数为 True,False scrollable 滚动元素...text='Settings').long_click() 拖动 # 在 0.25S 内将 Setting 拖动至 Clock 上,拖动元素中心位置 # duration 默认为 0.5, 实际拖动时间会比设置要高...() 监控界面 使用 wather 进行界面的监控,可以用来实现跳过测试过程中弹框 启动 wather ,会新建一个线程进行监控 可以添加多个 watcher 用法 # 注册监控 , 界面内出现有...allow 字样,点击 allow d.watcher.when('allow').click() # 移除 allow 监控 d.watcher.remove("allow") # 移除所有的监控...,如果不知道,写代码智能提示就可以找到了

1.1K50

HTML5原生拖放事件学习与实践

拖动又由 2 部分组成,分别是拖动元素相关事件和元素容器相关事件。...1、拖动元素相关事件 : 事件名称 说明 dragstart 在元素开始拖动时候触发 drag 在元素拖动反复触发 dragend 在拖动操作完成触发 2、容器相关事件 : 事件名称 说明...dragenter 拖动元素进入目的地元素所占据屏幕空间触发,一般需要取消浏览器默认行为。...dragover 拖动元素在目的地元素触发,一般需要取消浏览器默认行为。...dragleave 拖动元素没有放下就离开目的地元素触发 3、释放事件 : 事件名称 说明 drop 拖动元素在目的地元素里放下触发,一般需要取消浏览器默认行为。

1.1K20

历时大半年,Github团队成功减少30kb依赖体积

组长啪一下拍桌子:“那是996小作坊才这么干!我们大公司做事专业,这事儿「稳步迭代,增量解耦」”。 首选:我们建立指标跟踪,统计每行代码中jQuery调用次数。...最后,jQuery作为一个模块化库,为了保证「稳步移除」,我们需要维护一个自定义jQuery版本。 每当确定一个模块不再使用,就从自定义版本中移除他,并提供一个更小体积版本。...比如:完全用fetch替换$.ajax后,就能将AJAX模块剔除。 “这一通操作下来,没有半年工作量,看不行。”组长轻靠椅背,轻轻摇了摇头,说道。 ? 升华主题 你以为这就完啦?...naive~ 前面做,只能说稳步推进工作。接下来说,才是KPI重中之重。 jQuery移除,项目必然出现很多原生JS。 重复代码多了得抽象、封装是吧? “您是说上框架!...Vue模版语法也是根据Web Components标准演化来。” “我们要引!领!!代!” 从现在开始,所有复用功能组件都封装为Web Components。

71430

JQuery 入门学习(完结)

大家可以看到,用到就是target属性,event.target指就是触发mouseover事件DOM元素,在这里就是td。     所以在函数中,我们得到了鼠标所在元素。...event.target.parentNode).remove(); $("#buy").append('' + name + "/" + price + '元'); });     就是一个某个格子点击...看第一行,我们会发现,event.target.parentNode认识,但为什么要把它放在$()中间?     这就涉及到DOM对象转换成Jquery对象过程。...于是这里就得到了点击这一行商品名和价格。然后用$(event.target.parentNode).remove();把这一行移除,再用append把内容加到“购物车”里。...除了这些,Jquery还有个很重要性质:扩展性。大家如果有兴趣可以学习,网上也有很多用Jquery开发插件,比如md5本地加密、弹出悬浮框、分页特效。

94010

看不完那种!前端170面试题+答案学习整理(良心制作)

jquery ui则是在jquery基础上对jquery扩展,是jquery插件。jquery ui提供了一些常用界面元素,如对话框,拖动行为,改变大小行为等。...dom完全加载jquery允许你执行代码,使用$(document).ready()最大好处在于它适用于所有浏览器,jQuery有助于解决跨浏览器兼容性问题。...p标签内部超链接a: $('p a') 56.jquerydetach()和remove()方法区别 detach()和remove()方法都可以移除一个dom元素: remove()将元素自身移除同时...,也会移除元素内部一切,包括绑定事件以及与该元素相关jquery数据 detach()虽然可以将元素自身移除,但是它不会删除数据和绑定事件 57.如何利用jquery,来向一个元素添加或移除css...cdn上下载了jquery文件,再次打开页面,不会再次下载 59.jQuery.ajax()和jQuery.get()方法之间区别 ajax()方法更强大,可配置性更强,可以指定等待多久,以及如何处理错误

11.5K50

vue 中基于html5 drag drap拖放

事情是这样,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。 案例一: 开始,so easy!...但是,右边元素拖走了,右边就没有了,然后尝试了各种,拖动开始clone 元素,drapclone元素等等,都不太完美。...直接看代码好了,反正是给我自己看):左边列表元素拖动(draggable=’true’),绑定dragstart(开始事件),不要给它绑定draging(拖动事件),这样左边列表元素拖动属性,但是位置不会改变...右侧拖动区域 第一次触发了drop 操作后,新生成一个对象,这个对象既有拖动(draggable=’true’)属性,也绑定dragstart(开始事件),拖动事件(drag),这样新元素会在右侧随意拖动...,可以分享一下,基于jquery 拖拽插件,用过几个,但是总觉得vue中用jq有点怪。

1.4K00

从GitHub.com放弃使用jQuery说起

干唠是唠不出来什么,因为咱没怎么用过js,只是最近在学习vue.js,看到了一篇GitHub官方在2018年发布解释为什么放弃前端框架jQuery文章,心血来潮,想读一遍,顺便翻译出来,以帮助理解...默认情况下,没有匹配到选择器jQuery 会默默地跳过整个表达式,对我们来说,这是 bug 而不是功能。...例如,在我们删除了 jQuery CSS 伪选择器(如 :visible或 :checkbox)之后,我们就能够删除 Sizzle 模块;最后一个 $.ajax调用 fetch() 替换,我们能够删除...例如, 默认显示原始时间戳,升级为将时间戳转换为本地时区时间; 嵌套在 中,即使没有 JavaScript 也具有交互功能...至于译文中难免存在错误或者纰漏,欢迎批评指正! 本来都打算发布了,结果在查一个概念时候发现之前有人已经翻译过了,就取长补短了一下。 参考文章 GitHub:我们为什么会弃用jQuery

88920

前端入门6-JavaScript客户端api&jQuery

所以,即使找到了元素后,还需要将元素与一些事件进行绑定,比如点击事件等等。...mouseenter 与mouseenter基本相同,除了当光标仍然在某个后代元素也会触发 mouseup 释放鼠标触发 鼠标事件触发,指定处理方法都会传入一个 MouseEvent...jQuery 为什么使用 jQuery 类似于 JVM 隐藏了不同操作系统之间差异,让开发能够更专注于功能实现,而不必花费过多时间适配不同操作系统。...").before("是兄弟前span元素"); 移除 html //移除所有子元素 $(".main").html(""); //移除自已,自然子元素跟着移除 $("....jquery1 查看元素纯文本内容 console.log($(".main").text());//下面是元素标签和打出日志 $(".main").prepend("是第dsfds

6K40
领券