最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

动态生成的dome绑定jquery ui的droppable事件失效解决方法

在最近的项目中有一个需求,就是拖拽一个元素释放到另一个容器,所以我用了一个jQuery ui的droppable事件来实现这一效果,但是呢因为元素是动态创建的,想要在动他的dome元素上绑定droppable事件确实很难,并不能直接给它绑定,所以这里我们需要用到另外一个插件jquery.livequery.js,可以用它给动态生成的dom绑定事件,功能很强大,接下来我介绍一下它的用法

动态生成的dome绑定jquery ui的droppable事件失效解决方法

动态事件绑定插件livequery.js,可以利用它给相应的DOM元素注册事件或者触发回调函数。不仅当选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件。当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可

通过jQuery选择器选择一个DOM元素,livequery.js插件会实时地在整个DOM范围将其持久化。这意味着无论元素是先前存在的还是后来动态加载的,事件都会被绑定,就像是CSS给元素添加样式一样。同时,这款插件几乎在没占用什么资源的情况下就做到了这些功能

livequery.js 插件下载地址:点击下载 提取码:wawj

如何使用livequery插件?

引入jquery.livequery.js

<script src="scripts/jquery-3.4.0.js" type="text/javascript"></script>
<script src="scripts/jquery.livequery.js" type="text/javascript"></script>

通过livequery动态绑定事件

$('a').livequery('click', function() {
        alert('livequery导致的点击');
        return false;
});
$("body").append('

超链接B');

同时,livequery.js插件还可以为匹配的元素触发一个回调函数,当不再匹配这个元素时,触发另外一个回调函数

$('li').livequery(function(){
   // 使用hover函数 绑定mouseover和mouseout事件
   $(this).hover(function() {
      $(this).addClass('hover');
   }, function() {
      $(this).removeClass('hover');
   });
   }, function(){
      // 解除绑定mouseover和mouseout事件
      $(this).unbind('mouseover').unbind('mouseout');
});

使用livequery插件来注册其他插件

if(jQuery.livequery)
   jQuery.livequery.resisterPlugin("method1", "method2", "method3");

与jQuery1.3中新增的 live(type, fn) 方法区别:

  • live也能给当前以及将来会匹配的元素绑定一个事件处理函数(使用委派方式),也能绑定自定义事件。但是目前支持的事件有click/dblclick,mousedown/up/move/over/out,keydown/press/up,还不支持的事件有blur/focus,mouseenter/leave,change,submit
  • live方法不支持livequery提供的“无事件”样式的回调函数,live只能绑定事件处理函数
  • live方法没有“setup”和“cleanup”的过程,因为所有的事件是委派而不是直接绑定在元素上的

当然,live()方法在jQuery版本1.7中被废弃,在版本1.9中被移除。请使用on()方法代替。

说到这里可能有人想问了,我试过livequery,确实是可以,不过jquery的delegate也是可以动态生成事件的啊,为什么就没有效果呢?jquery既然提供了delegate用来动态绑定事件,就没必要再用一个插件去做这样的工作。

你可能不太明白Jquery执行顺序.Jquery是在Dom加载完成后,开始执行的.这时候,你添加的那个动态元素并不包含在dom中,即使你后面手动去添加元素到dom中,并绑定事件,但这时的Jquery还是不会找到你添加的这个元素的.所以你用的live,bind,delegate都不会起作用的。

通往技术的巅峰还很漫长,新的技术在层出不错,所以我们必需不断学习总结一路遇到的技术问题,点滴积累终成大海,加油吧,小伙伴们!

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 动态生成的dome绑定jquery ui的droppable事件失效解决方法

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发