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

为什么当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: 被移除的元素

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

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

    59320

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

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

    6.5K21

    基于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 事件移除视觉反馈

    29820

    DOM 高级工程师不完全指南

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

    72410

    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: 被添加或移除的子元素之后的兄弟节点 根据目前的信息

    73610

    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.9K90

    不写一行代码实现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.2K20

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

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

    72830

    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本地加密、弹出悬浮框、分页特效。

    94910

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

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

    11.5K50

    从GitHub.com放弃使用jQuery说起

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

    90720

    vue 中基于html5 drag drap的拖放

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

    1.4K00

    WEB入门之十九 UI

    jQuery UI是在jQuery的基础上,利用jQuery的扩展性而设计的针对UI的插件。它提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。...Draggab即鼠标拖动,主要可以实现通过鼠标拖动页面元素,例如拖动层、拖动图片或表格等。...9.1.1 effect函数 effect函数的用法和show/hide函数一样,只不过该函数用在已经显示到了页面上的元素,然后主要通过改变元素形状(大小、位置等)来实现动画特效的,具体语法如下所示...图9.2.2 手风琴相册 3:可拖动的菜单 ​训练技能点​ Ø jQuery Draggable ​需求说明​ 在实训任务1的基础上,实现通过鼠标可以拖动工具栏,但是只能拖动到页面的上端或下端...如果拖动到了其他地方,当松开鼠标时,工具栏回归原位。

    7310
    领券