事件委託---動態建立的元素新增事件

以前經常會出現一個問題，就是用javascript建立的元素，點選事件是失效的，因為當前頁面並不會實時監聽元素上面是否需要掛載事件。

案例程式碼如下：

 <button id='btn'>建立元素</button>
 <div id='oDiv'>
      <p class='p1'>第一個p</p>
 </div>
Javascript程式碼
<script src='jquery.js'></script>
<script>
   $('#btn').click(function(){
      $('#oDiv').append(' <p class='p1'>pppppp</p>');
 });
$('.p1').click(function(){
   console.log('列印');
});
</script>
=================上面後建立的p不會擁有點選事件
<button id="btn">建立</button>
   <div id="div1">
       <ul>
           <li>一個li</li>
           <li>一個li</li>
           <li>一個li</li>
       </ul>
   </div>
   <script src="js/jquery.js"></script>
   <script>
        var $Prent = $("#div1 ul");
       $("#btn").on("click",function(){
          $Prent.append("<li>建立的li</li>");
       });
        $Prent.on("click",function(ev){
           var target =$(ev.target);
           if(target.closest("li").length===1){
               target.closest("li").html("<b style='color:red'>經過事件委託修改的文字</b>");
           }
        });
   </script>

=。=！ 如果你測試就會發現，後建立的li不僅，可以點選，而且li中內容也可以被修改。
總結：
事件委託其實就是根據事件冒泡的原理，所謂的委託就是把（點選，移動，鍵盤）事件，交給他的父級，甚至祖先元素去完成點選事件，因為事件冒泡會逐級向上冒泡，所以上面案例父級元素獲取到了點選事件，
$(ev.target) 通俗點理解target就是目標，也就是說當前事件的物件是誰。
使用jQuery closest();方法，這個方法：
closest會首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查詢父元素，一層一層往上，直到找到匹配選擇器的元素。如果什麼都沒找到則返回一個空的jQuery物件，此案例檢測他的length值，0代表沒找到值，要注意，closest()引數是陣列，或者字串！