动态添加DOM元素

 转自：http://www.cnblogs.com/sunjing/archive/2008/12/04/1347641.html

 这两天做一个管理系统页面的时候遇到一个问题，有的时候需要动态把一个元素复制几个出来，例如添加联系地址，有的时候有几个地址，那么可以动态的添加、删除地址个数。

    做添加的功能并不复杂，只需要在添加按钮上绑定事件就可以了，但是做删除的时候就让我折腾了好久，除非把删除的功能代码写在HTML里，否则如果用JQ做的事件绑定就会失效，想想也是，JQ绑定的时候DOM里并没有这个元素，所以之后生成出来的元素并不能绑定上。

     折腾N久无结果后，今天向高手求助，得到一段JQ的代码：

$(function (){
    // 点击添加按钮后，自动找父节点中的.tableTemplet,追加到父节点
    $(".templetAdd").click(function (){
        var oContent= this.parentNode;
        $($(oContent).find(".tableTemplet").html()).appendTo(oContent).find('.templetDel').click(function() {
            $(this).parents('table:eq(0)').remove(); 
        });
     });    
});

 

这段代码的重点是从第二个find开始，它在更新了DOM后，利用JQ的函数链又做了一次绑定

jQuery Live Query 插件

     上篇日志里写到的那个问题其实有种更简单的解决办法，就是使用jquery的Live Query 插件，网上有些该插件的使用方法，它每隔20毫秒会对DOM里的元素重新来一次事件绑定，老早就知道它，但是一直不知道具体用法，前几天解决的问题的时候也用过live query，但是没弄出来。。汗一个。。。

今天上网继续搜索，终于在一个网站：http://brandonaaron.net/docs/livequery/里找到了它另一种用法，成功的解决了问题。

使用方法1（这种方法测试没通过）：

$('a')
    .livequery('click', function(event) {
        alert('clicked');
        return false;
    });

 

使用方法2（测试通过）：

$('li')
    .livequery(function(){
    // use the helper function hover to bind a mouseover and mouseout event
        $(this)
            .hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
    }, function() {
        // unbind the mouseover and mouseout events
        $(this)
            .unbind('mouseover')
            .unbind('mouseout');
    });

 

brandonaaron.net网站貌似是一个JQ插件的索引网站，里面有好多插件的资料，站长是好人啊！

现在的Jquery团队有主要开发人员，推广人员，UI，插件开发，网站设计维护，其中3个主要开发人员分别是：两个美国人JohnResig/BrandonAaron，一个德国人JornZaefferer)

 刚在网上找到的。。原来BrandonAaron是JQ的主力开发人员，致敬！！！