动态生成的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

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

通过livequery动态绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$('a').livequery('click', function() {
        alert('livequery导致的点击');
        return false;
});
$("body").append('<p><a href="#">超链接B</a>');
]/cc]
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>同时,livequery.js插件还可以为匹配的元素触发一个回调函数,当不再匹配这个元素时,触发另外一个回调函数</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
[cc lang="html"]
$('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插件来注册其他插件

1
2
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都不会起作用的。

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

未经允许不得转载:码云笔记 » 动态生成的dome绑定jquery ui的droppable事件失效解决方法
喜欢(0) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

在线客服

在线客服

  • 扫描二维码,微信联系 扫描二维码,微信联系