Ngăn Chặn Bind Sự Kiện Nhiều Lần Trong JQuery

• Bài viết
• Hỏi đáp

Tạo bài viết Đăng ký Đăng nhập Code24h.com Blog 12/08/2018, 14:46 Ngăn chặn bind sự kiện nhiều lần trong jQuery

Bind sự kiện nhiều lần là một vấn đề thường xảy ra nhưng nhiều lập trình viên ít đề y đến. Việc này có thể thể hiện lên cho mình nhìn thấy khi chương trình chạy sai hoặc cũng có thể không hiển thị dấu hiệu gì cả. Đây cũng là một vấn đề làm cho tốc độ của chương trình giảm xuống. Vấn đề này xảy ra ...

Bind sự kiện nhiều lần là một vấn đề thường xảy ra nhưng nhiều lập trình viên ít đề y đến. Việc này có thể thể hiện lên cho mình nhìn thấy khi chương trình chạy sai hoặc cũng có thể không hiển thị dấu hiệu gì cả. Đây cũng là một vấn đề làm cho tốc độ của chương trình giảm xuống. Vấn đề này xảy ra khi sự kiện được gọi trong $(document).on("page:change", function(){});. Khi sử dụng jquery page:change các sự kiện cũ đã bind không được xóa đi và sự kiện mới lại được thêm vào. Vì thế một đối tượng có thể bind sự kiện nhiều lần. Ví dụ:

$(document).on('page:change', function(){ $(document).on('click', '#example-button',function() { console.log('Button click'); }); });

button example-button trên dược bind sự kiện click mỗi lần vào page:change. Số lần bind sự kiện click phụ thuộc vào số lần page:change đã được thực hiện. Trong bài viết này sẽ cho 2 cách để giải quyết vấn đề trên.

Cách 1 :

Trước khi bind sự kiện phải ubund các sự kiện đã có trước để đảm bảo các sự kiện có từ trước đã xóa hết và chỉ có mỗi một sự kiện mới được gán. Có thể sử dụng hàm off hoặc unbind.

Dùng off

$(document).on('page:change', function(){ $(document).off('click', '#example-button').on('click', '#example-button',function() { console.log('Button click'); }); });

Dùng unbind

$(document).on('page:change', function(){ $(document).unbind('click', '#example-button').on('click', '#example-button',function() { console.log('Button click'); }); });

Cách 2:

Trong mỗi sự kiện, khi bind sự kiện kiểm tra trước, Nếu sự kiện đã bind rồi sễ không cho thực hiện gì hết. Khong khuyến khích sử dụng phương pháp này vì cách này chỉ làm cho đoạn code không thực hiện sai, nhưng số lần sự kiện bind vẫn giữ lại.

$(document).on('page:change', function(){ $(document).unbind('click', '#example-button').on('click', '#example-button',function(e) { if(e.handled !== true) // This will prevent event triggering more then once { console.log('Button click'); e.handled = true; } }); }); Bình luận về bài viết này

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Có thể bạn quan tâm

• 1 Tránh những gánh nặng trong việc xử lý file uploads
• 2 Kotlin for Android: working with collections and data class
• 3 Làm việc với tag trong Angular2 với ng2-tag-input
• 4 Redux cho người mới bắt đầu - Part 3 Middleware
• 5 Skinny controllers through refactoring
• 6 Rails Service Object
• 7 Những thứ mới ở Chrome 56
• 8 Cấu trúc của các component trong Rails và các cách refactor code với các Ruby object - Part 2
• 9 Tổng quan về TDD
• 10 Series Hướng Dẫn Lập Trình Ruby on Rails (Phần 5)

0 Các chủ đề đang được quan tâm phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN

• Các câu hỏi thường gặp
• Điều khoản sử dụng
• Chính sách và quy định
• Chính sách bảo mật thanh toán
• Hỗ trợ học viên: [email protected]
• Báo lỗi bảo mật: [email protected]

VỀ CODE24H

• Giới thiệu Code24h
• Cơ hội nghề nghiệp
• Liên hệ với chúng tôi

HỢP TÁC VÀ LIÊN KẾT

• Đăng ký giảng viên
• Giải pháp e-learning
• Chương trình đại lý
• Chương trình Affiliate

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2025