使用livequery插件对动态创建的DOM元素进行事件绑定

Livequery是一款基于jQuery的插件，主要作用是对动态创建的DOM元素进行事件绑定。比如我在页面中动态创建了一个新的按钮，需要通过单击新的按钮来完成某些操作，这个时候就可以用到livequery。

先来看以个不适用livequery的例子。

<input type="button" id="create" value="点击这里" /> 
<script type="text/javascript"> 
$(function(){ 
    $("#create").click(function(){ 
        $("<input type=\"button\" class=\"newdiv\" value=\"新增了一个按钮，点击看看\" />") 
.insertAfter($(this)); 
    }); 
    $(".newdiv").bind('click',function(){ 
        alert('绑定了单击事件'); 
    }); 
}); 
</script> 

通过单击页面上的按钮创建一个新的按钮，这时再去单击新按钮时却没有任何反应，但是我已经在新的按钮上通过bind方法绑定了一个click事件， 原因是bind函数执行时，这些新的按钮还没创建，所以不可能绑上事件。这时需要借助livequery来完成绑定，直接将上述代码中的bind改成 livequery，当然先要加载livequery插件。

其实到这里还没发现livequery有多强大，jQuery本身的live方法已经基本能实现了上述功能。

$(".newdiv").live('click',function(){ 
    alert('绑定了单击事件'); 
}); 

关键是livequery不光只是绑定事件，它还能做很多事。

接下来看一个支持jQuery UI的draggable函数的例子：

在页面上放置一个按钮。

<input type="button" id="drag" value="点击这里" /> 

执行操作：

$("#drag").click(function(){ 
    $("<div class=\"dragdiv\">新增了一个可以拖动的DIV</div>").insertAfter($(this)); 
}); 
$(".dragdiv").livequery(function(){ 
    $(this).draggable(); 
}); 

借助livequery和jQuery UI，可以在页面上动态创建N个可以拖动的DIV。此外完成此例必须导入jQuery UI库。

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接，否则视为侵权。