寫這篇文章主要是對自己以前學習jquery外掛的總結。現在元件化開發，以vuejs 、 reactjs 、angular 為代表的庫或框架讓web元件化開發逐漸推廣起來。下面是我用jquery寫的一款簡易的提示框元件。雖然沒有遵守mvc寫法，但也是很實用。

效果：

有時使用者執行某個操作時，需要彈出提示框讓使用者確定執行某個回撥函式，這樣就有效的避免使用者因操作失誤執行不該執行的操作。

程式碼

/**
 * Created by helti on 2017/2/16 0016.
 */

!(function(window,$,undefined){

    var htmls={
        'popbg'
 
:'<div class="pop-bg"></div>',
        'pwraper':'<div class="p-wraper"></div>',
        'popheader':'<div class="p-heaer"></div>',
        'popdes':'<p class="p-des"></p>',
        'palert':'<div class="p-alert"><button id="btn-ok">確定</button></div>'
 
,
        'pconfim':'<div class="p-confim"><button class="btn-ok">確定</button> <button class="btn-cancel">取消</button></div>'
    };
    var winpop=function(opt,callback){
        var defaults={
            headercon:'',
            popdes:''
        }
        this.options= $.extend({},defaults,opt);
        this
 
.$body=$('body');
        //背景
        this.$popbg=$(htmls.popbg);
        //pop父容器
        this.$wraper=$(htmls.pwraper);

        if(callback !='undefined'){
            if(typeof callback == 'function'){
                this.callback=callback;
            }
        }else{
            throw new Error ('callback need function')
        }

    };
    winpop.prototype={

        /*
          alert 或者 confim
         */
        createdom:function(ele){
            var $popheaer=$(htmls.popheader).text(this.options.headercon);

            var $contenthtml=$(htmls.popdes).text(this.options.popdes);
               // $palert=$(htmls.palert);

            this.$wraper.append($popheaer).append($contenthtml).append(ele);
            this.$body.append(this.$popbg).append(this.$wraper);
           // this.callback();
          //  console.log(this.callback);
        },
        okclick:function(){
            //確認按鈕執行回撥函式
            this.callback();
        },
        eventclick:function(){
              var that=this;
              that.$wraper.find("#btn-ok").on("click",function(){
                  that.remove();
                  that.okclick();
              })
              //只通過事件委託繫結一次，如果用on繫結，因為doument無法刪除，導致事件一直存在
             /* $(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();

              });*/

               that.$wraper.find(".btn-ok").on("click",function(){
                  that.remove();
                  that.okclick();
              })
             /* $(document).one("click",".btn-ok",function(){
                  that.remove();
                  that.okclick()
              });*/
               that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();

              })

        },
        alertpop:function(){
            var $palert=$(htmls.palert);
            this.createdom($palert);
            this.eventclick();
        },
        confimpop:function(){
            var $pconfim=$(htmls.pconfim);
            this.createdom($pconfim);
            this.eventclick();
        },
        remove:function(){
            this.$wraper.empty().remove();
            this.$popbg.empty().remove();

        }
    };


    window.winpop=winpop;

}(window,jQuery));

總結：

我們都知道動態生成的dom元素，要給它繫結事件時，必須給予事件委託，通常我們委託給document.

//這裡不應該用on
$(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();

              });

但是我們委託給document時會出現一個問題，就是但你再次觸發按鈕時，原來繫結的事件不會銷燬。因為document不能刪除。那麼用one呢？我們只讓它執行一次。大家可以試下。

最終我使用了

that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();

              })

這樣就避免了事件不被銷燬。從而累計事件的bug.