zepto | 用事件委托去解决无法给新增添的DOM添加事件的问题

　　前段时间在做一个任务的时候，碰见了一个问题：zepto无法用on事件去监听新增加的dom事件。这个问题用live可解决， 但是live在ios下失效，为了解决这个问题，我采用了暴力的方法去解决，每次添加dom都绑定一次事件，这样是可以解决问题的，但是这样的方式肯定消耗很多资源，不是一个好的方式，今天在读JavaScript富应用开发这本书时，找到了一个比较完美的解决方法，利用事件委托与自定义事件，封装成一个插件（$.fn.xxx）的形式。

　　下面就模拟选项卡的形式去解决这个问题

zepto：http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js

html

    <ul id="tabs">
        <li data-tab="tab_1" class="tab_1">tab_1</li>
        <li data-tab="tab_2" class="tab_2">tab_2</li>
    </ul>
    <input type="button" name="" value="button" class="button">

这个button是为了动态添加dom

js

    $.fn.tabs = function(){
        var element = $(this);
        element.delegate("li","click",function(){
            var className = $(this).attr("class");
            var dataTab = $(this).data("tab");
            element.trigger("changes-tabs",[className,dataTab])
        });
        element.on("changes-tabs",function(e,className,dataTab){
            // element.find("li").removeClass("active")
            element.find("li").not("."+dataTab).removeClass("active");
            element.find("."+className).addClass("active");                

        });
        var firstClassName = element.find("li:first-child").attr("class");
        var firstDataTab = element.find("li:first-child").data("tab");
        element.trigger("changes-tabs",[firstClassName,firstDataTab]);
    }
    $("ul#tabs").tabs()
    $(".button").on("click",function(){
        var html = "<li data-tab='tab_3' class='tab_3'>tab_3</li>";
        $("#tabs").append(html);
    })

为什么会有一个data-tab这个属性，是因为我需要在点击当前li的时候，移除非当前li的active这个class，并让当前的li加上class

这样就很容易的给新增加的dom添加事件了

css

    .active{
        color: red;
    }