動態生成的html元素繫結click事件

第一篇部落格，開啟技術部落格的生涯，歡迎大家批評指教（堅信妹子也可以做好程式猿）
今天想說幫公司做專案的時候遇到的一個小問題，動態新增html元素以後再去事件監聽出問題。在實際開發中會遇到要給動態生成的html元素繫結觸發事件的情況。

就是上面的一張表格要動態實現新增行，然後序列號還要隨著增加，當刪除的時候序列號依舊是按順序排列。
剛開始使用jQuery的on方法來解決，但是發現一個問題會出現事件繫結很多次的問題。然後查詢了網上的一些資料，使用live進行事件委託，然而還是出現事件繫結多次bug，很崩潰。最後試著用onclick內聯，可以完美解決，這裡其實有點困惑，但是算是比較完美的解決這個問題。

html：

 <div class="col-sm-12">
           <div class="panel panel-primary">
              <div class="panel-body">
                <div class="block-content collapse in">
                  <div class="span12">
                    <table id="volTab"  class="table">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>姓名</th>
                              <th>證件號碼</th>
                              <th>手機號碼</th>
                              <th>銀行卡號</th>
                              <th>E-mail</th>
                              <th>地址</th>
                              <th>刪除</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr id="1">
                            <td>1</td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><div><input type="text" class="form-control"/></div></td>
                            <td><i class="fa fa-fw fa-minus"></i></td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                </div>
           </div>
           </div> 
           <button type="button" id="add" style="width:100px;float:left;margin:0 auto;margin-left:40%" class="btn btn-block btn-primary">新增</button>
            <button type="button" id="submit" style="width:100px;float:left;margin:0 auto;margin-left:5px" class="btn btn-block btn-default">提交</button>

js：

<script>
 $("#add").click(function(){
        var len=$("#volTab tr").length;    
        $("#volTab").append("<tr id="+len+">"
                               +"<td>"+len+"</td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><i class='fa fa-fw fa-minus' onclick=\'deltr("+len+")\'"+"'></i></td>"+"</tr>");
     });
  var deltr =function(index)
  {
      debugger;
      var b=$("#volTab tr").length;
      $("#"+index).remove();    
     for(var i=index+1,j=index;i<=b;i++,j++){
                 $("#"+i).replaceWith("<tr id="+(i-1)+">"
                               +"<td>"+(i-1)+"</td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><input type='text' class='form-control'></td>"
                               +"<td><i class='fa fa-fw fa-minus' onclick=\'deltr("+(i-1)+")\'"+"'></i></td>"+"</tr>");

            }
  }
</script>