首先來看下這兩種情況下的輸出：

<div class="parent">
    <div class="father">
        <div class="son">測試.on()方法</div>
    </div>
</parent>

情況一：

$(".parent .father").on("click", function(){
    console.log("父元素被點選");
});
$(".parent .son").on("click", function(){
    console.log("子元素被點選"
 
);
});

情況一：

$(".parent .father").on("click", function(){
    console.log("父元素被點選");
});
$(".parent").on("click", ".son", function(){
    console.log("子元素被點選");
});

這兩種情況的輸出分別為：
情況一：

子元素被點選
父元素被點選

情況二：

父元素被點選
子元素被點選

為什麼兩個等價的程式碼，輸出結果卻不同呢？
原因在於，.son的click事件繫結的位置不同：

$(".parent .son").on("click"
 
, function(){
    console.log("子元素被點選");
});

這行程式碼是將點選事件繫結在.son元素上，而.son是.father的子元素

而

$(".parent .son").on("click", function(){
    console.log("子元素被點選");
});

這行程式碼雖然觸發的都是.son上的點選事件，但是該點選事件繫結在了.parent元素上，而.parent是.father的父元素