$().click () 和 $(document).on ('click','要選擇的元素',function (){}) 的不同

1. 場景圖片:
   
2. 場景描述: laravel路由控制器檢視載入人員資訊放在id=’peopleContent’內容中，當點選圖中.btn-del-person-la按鈕執行如下js成功彈出123;

   $(function() {
     $('.btn-del-person-la').click(function(){
          alert(123);
      });
   })

   當執行ajax執行人員搜尋出來的檢視資料，清空原先的peopleContent中的內容，填充ajax執行的結果，同樣含有.btn-del-person-la的按鈕，但是點選按鈕，不會彈出123;

解決辦法：換成如下寫法

$(function() {
     $(document).on('click', '.btn-del-person-la',function(e){
        alert(123);
    })
})

這樣不管是自然載入人員還是ajax搜尋人員都可以彈出123;

總結:

1. $(選擇器).click(fn)
   　　當選中的選擇器被點選時觸發回撥函式fn。只針對與頁面已存在的選擇器;

2. $(document).on(‘click’,’要選擇的元素’,function(){})
   　　on方法包含很多事件，點選，雙擊等等事件。和$().click()的用法一樣，最大的區別即優點是如果動態建立的元素在該選擇器選中範圍內是能觸發回撥函式

本作品採用《CC 協議》，轉載必須註明作者和本文連結