jquery 之干净的事件绑定（分离逐一dom元素绑定）

在写js代码时往往会遇到这样的问题, 举个例子: 让你实现如下一个功能模块；

要求：1. 每次添加新关键字页面不许刷新

            2. 新加的关键字确保配置，删出， 修改可用（即后面的蓝色按钮可用）

<div class="panel-body">    <div class="list-group" id="keyword-list-group"><a href="#" class="list-group-item"><span class="badge delete-keyword"><i class="fa fa-trash-o"></i></span><span class="badge edit-keyword"><i class="fa fa-edit"></i></span><span class="badge edit-reply-keyword-info"><i class="fa fa-credit-card"></i></span>00</a><a href="#" class="list-group-item"><span class="badge delete-keyword"><i class="fa fa-trash-o"></i></span><span class="badge edit-keyword"><i class="fa fa-edit"></i></span><span class="badge edit-reply-keyword-info"><i class="fa fa-credit-card"></i></span>阅读</a></div>    <hr>    <div class="add-keyword"><a id="add-keyword-btn"><i class="fa fa-plus"></i> 添加关键字</a>    </div></div>

以前的写法是每当产生一个新的 "<a href="#" class="list-group-item">...</a>" 之后呢在给其内部的三个按钮绑定事件，类似与这样如下写法：

$("#keyword-list-group").append("<a href="#" class="list-group-item">...</a>");
bindMenuEvent();

现在有更好的写法如下： 

//将事件绑定在更外层上利用事件冒泡原理让你不必没心append一个"<a href="#" class="list-group-item">...</a>" 之后再调用绑定事件的方法逐一绑定//例如给所有删除按钮（包括新产生的）绑定事件$("#keyword-list-group").on("click", "delete-keyword", function() {......});