Sự khác biệt của click() và on(“click”)

bởi Con Heo Không Mập
0 bình luận

Dạo gần đây, mình được assign làm một dự án mà mình đảm nhiệm cả phần backend với phần frontend. Chính nhờ thế mình có cơ hội được tiếp xúc rất nhiều với jQuery, đặc biệt là sự kiện click, và qua đó, mình nhận ra một điều khá thú vị giữa click()on(“click”).

Vấn đề thực tế

Đây là vấn đề thực tế khi minh làm việc. Thông thường, để trói buộc sự kiện click chuột, mình sẽ sử dụng hàm .click() trong jQuery. Tuy nhiên, có một điều mà mình không biết đó chính là sự kiện .click() của jQuery không thể trói buộc vào các element động!

Để mình ví dụ cho bạn dễ hình dung, giờ hãy thử tạo 1 file index.html và mình đó một markup như sau:

Mình sẽ thêm đoạn script:

Markup HTML

Giờ khi bạn thử click vào nút Thêm nút, bạn sẽ thấy mọi thứ vẫn hoạt động bình thường chưa có gì xảy ra, vẫn thêm được nhiều nút vào thẻ div .content. Giả sử chúng ta cần click vào mấy cái nút Lời Khuyên Cuộc Sống và cho nó alert lên 1 đoạn text đi ha, mình sẽ thử như sau:

Khi bạn reload, click vào chữ Thêm nút, nút Lời Khuyên Cuôc Sống vẫn hiển thị ra, nhưng bạn có click tới chết cũng chẳng có cái bảng alert nào hiện lên 😀

Chúng ta sẽ thử thay đổi lại ha, giờ mình sẽ sử dụng sự kiện on.() như sau:

Khi mình ra lại trang của mình và click vào nút Bí Mật Cuộc Sống, kết quả sẽ:

Vậy đâu là sự khác biệt?

Giải thích

Phương thức .click() là một phương thức mà khi bạn sử dụng, nó sẽ trói buộc sự kiện click một cách trực tiếp vào những element đã tồn tại. Điều này đồng nghĩa với việc nếu bạn tạo ra những element khác thì sự kiện này sẽ không thể nào hoạt động được. Vì thế, để hoạt động được thì chúng ta phải tạo một “delegated” binding (mình không biết dịch sao cho hay, dịch thô nó thì là một trói buộc uỷ quyền?) với phương thức .on().

Những sự kiện này sẽ không trói buộc trực tiếp vào cái element động, mà nó sẽ trói buộc một sự kiện nào đó vào thằng cha (một element đã tồn tại – dễ nhất thì chính là document) của cái element động đó, và sẽ tìm tới thằng con (tức element động mà bạn sẽ tạo ra), cùng với một function. Function này sẽ diễn ra khi và chỉ khi nó tìm thấy được element này có tồn tại.

Hy vọng rằng với mẹo nhỏ này sẽ giúp bạn dễ làm việc với jQuery trong tương lai! Nếu bạn thấy mẹo này thú vị thì đừng quên theo dõi fanpage của bọn mình để cập nhật các bài viết mới nhé: Fanpage Cuồng Team.

(Visited 229 times, 1 visits today)
2 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x