1. Hoàn cảnh

Như phần đầu đề mình nêu trên, thì ngày xưa mình hay gặp trường hợp này, gặp rất nhiều nữa là đằng khác, và cũng bối rối vl  vì phải cheat bằng cách đăng ký lại event cho cái thằng mới được đẻ ra 1 cách "thủ công" .... đúng mệt luôn.

2. Delegate là gì

Thôi xin vào phần chính của bài viết, đầu tiên ta cần hiểu delegate là gì, theo Google translate dịch chữ delegate thì delegate có nghĩa là giao quyền, 1 thằng nào đó đứng ở đâu đó (gọi nôm na là ông chủ) và giao quyền cho một thằng khác (thằng nhân viên).................Ờ thì vậy nghĩa là thế nào?

3. Hướng dẫn & Minh họa

Là thế này, xem bên dưới nhá:

Giả sử bạn có các thẻ HTML như sau

<div class="wrapper" title="đây là thằng lãnh đạo">
    <p title="đây là thằng culi">Click here</p>
</div>

3.a: Trường hợp bình thường

Thường khi các bạn xử lý click event cho thẻ </p> ở trong các bạn thường làm kiểu này phải không.

$("p").on("click",  function(e){

    alert("Hi, hàm chạy rồi nè");//Thân hàm

});

3.b Trường hợp xảy ra rắc rối

Và nói chung là cái hàm này vẫn chạy vi vu mịt mù cho tới khi thằng <p/> cũ bị remove mất và thay bằng một thằng <p/> mới, rồi bạn lại muốn là click và thằng <p/> mới nó vẫn thực hiện event cho bạn (mơ đi, nó không còn là <p/> của ngày xưa, nó không làm đâu).

$("p").on("click",  function(e){

    $(this).after('<p title="Thằng culi mới">Click here lần 2</p>'); // Thêm 1 thẻ </p> mới vào

    $(this).remove(); //Remove cái thẻ </p> cũ đi

});

3.c Dài dòng một tí

Giờ bạn thử click vào chỗ "Click here lần 2" thử xem có sự kiện gì không, đảm bảo với bạn là không, tại vì tuy nó là 1 thẻ <p/> như thẻ <p/> cũ trước đó nhưng do nó mới vừa được sinh ra nên chưa có sự kiện nào đăng ký cho nó cả do đó nó không thể thực thi cái quyền mà nó chưa được đăng ký, giống như là bạn tên Tèo và bạn đã có giấy phép láy xe, thằng bạn của bạn cũng tên Tèo nhưng nó chưa có giấy phép láy xe. Điều đó có nghĩa là thằng Tèo thứ 2 kia không thể láy xe được.

Vậy bây giờ làm sao để giải quyết trường hợp này, để bất kỳ thẻ <p/> nào sinh ra cũng có thể thực thi sự kiện? Đấy là mục đích của delegate

3.d Giải quyết

Rõ ràng là rất cùi bắp khi phải mỗi lần mỗi đăng ký việc thực thi sự kiện cho 1 phần tử <p/> mới sinh ra.

Thay vì vậy tại sao ta không tìm 1 ông chủ và dù có bất kỳ thằng nhân viên nào mới được thay thế thì nó vẫn được tự động giao cheap rolex replica quyền từ ông chủ mà không cần phải rắc rối đi xin cái quyền đó.

var i = 2; //Biến i này dùng để biết có phần tử thứ mấy được thêm vào, không có ý nghĩa gì với nội dung chính 
$( "div.wrapper" ).delegate( "p", "click", function() {
    $(this).after('<p title="Thằng culi mới">Click here lần '+ i++ +'</p>');
    $(this).remove(); 
});

Ở đoạn code trên bạn thấy, ta đã bầu phần tử div.wrapper làm ông chủ và khi có bất kỳ thẻ <p/> nào được sinh ra đi chăng nữa thì thẻ <p/> đó đều được tự động cấp quyền thực thi.

4. Lời kết

Vậy là ta đã kết thúc phần tìm hiểu về Delegate trong jQuery, qua đây mình mong các bạn sẽ có cái nhìn rõ hơn về delegate vì nó sẽ giúp các bạn rất nhiều thay vì gọi đi gọi lại đống hàm mà mình đã gọi trước đó, giúp code đẹp hơn và giảm số lượng code jQuery của mình.