【jQuery】click 事件綁定方式比較

本篇重點

• $('選擇器').click() 的應用和使用時機
• $(document).on('click', '選擇器', function(){}) 的應用和使用時機
• .on('click', function() {}) 不是委派給 document 就無法適用在動態生成的元素

在前端開發中，經常需要偵測使用者對於網頁上元素的點擊事件，jQuery 中，可以使用 .click() 或 .on('click') 事件來偵測元素的點擊事件，雖然都是偵測點擊事件，但兩者有些差異。

$(選擇器).click()

應用重點

• 直接綁定點擊事件到指定的元素
• 只適用於當前 DOM 中已存在的元素
• 當指定元素被刪除，綁定的事件也會被刪除

使用時機

• 用於靜態元素，這些元素在 DOM 加載時已經存在且不會動態變更
• 適合簡單的事件綁定，不需要過多處理

範例

1
2
3

<button class="button is-link add_button">
    新增按鈕
</button>

1
2
3
4
5
6
7
8

let num = 1;
$('.add_button').click(function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

點擊 “新增按鈕” 產生新按鈕，新的按鈕雖然 class 也有 .add_button，但無法產生新的按鈕

$(document).on(‘click’, ‘選擇器’, function(){})

應用重點

• 委派事件處理給 document，再綁定點擊事件到指定的元素
• 適用於當前或未來新增的元素
• 當指定元素被刪除，綁定的事件依然存在

使用時機

• 適用於動態生成的指定元素，確保事件觸發

範例

1
2
3

<button class="button is-link add_button">
    新增按鈕
</button>

1
2
3
4
5
6
7
8

let num = 1;
$(document)on('click', '.add_button', function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

點擊 “新增按鈕” 產生新的按鈕，新按鈕也可以產生新的按鈕

如果 .on('click', function() {}) 不是委派給 document 會發生甚麼事

.on('click', function() {}) 不是委派給 document 就無法適用在動態生成的元素，只能綁定到當前 DOM 中已存在的元素

例如

1
2
3

<button class="button is-link add_button">
    新增按鈕
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let num = 1;

$('.add_button').on('click', function() {
        let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

$('.add_button').click(function() {
    let new_button = `<button class="button is-success add_button">
                新增按鈕 ${num}
            </button>`;
    $(this).after(new_button);
    num ++;
});

$('.add_button').on('click', function() {}) 和 $('.add_button').click(function() {}) 寫法不同，但兩者的效果是一樣的，都是綁定 click 事件到當前 DOM 中已存在的 .add_button 元素，動態生成的 .add_button 元素無法觸發事件

結論

• click(function() {}) 是最簡單的事件綁定方式，適合靜態元素的單一點擊事件。
• $(document).on('click', function() {}) 是較複雜但更具彈性的方式，特別適合處理動態生成的元素或需要更靈活事件處理的情況。

根據具體使用場景選擇最適合的綁定方式，才能確保達到預期效果。如果你需要偵測點擊事件，不妨試試這兩種方式，看哪一種更符合你的需求！

延伸閱讀

【jQuery 官方文件】.click() 介紹
【jQuery 官方文件】.on(‘click’, function() {}) 介紹
【天矽科技】DOM 是什麼?