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

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

动态事件绑定插件 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 都不会起作用的。

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