Bind (Attach) Event Handler Với Phần Tử HTML Động trong jQuery

Trên trang bạn có một bảng chứa danh sách các việc cần làm (gọi là task), mỗi task tương ứng với một thẻ <tr> với code HTML như sau:

<table>
    <thead>
        <tr>
            <th>Tên Task</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Học HTML<td>
        </tr>
        <tr>
            <td>Học CSS<td>
        </tr>
        <tr>
            <td>Học JavaScript<td>
        </tr>
        <tr>
            <td>Học jQuery<td>
        </tr>
    </tbody>

</table>

Khi người dùng click vào một task chúng ta sẽ tạo một hộp thoại cảnh báo alert với nội dung là tên của task đó. Code HTML và JavaSCript (jQuery) như sau:

$(function() {
    $("table tbody tr td:first").click(function() {
        alert(this.text());
    });
});

Tuy nhiên có một số thẻ <tr> được thêm động vào <tbody> sau khi đoạn code bind even click trên được chạy:

$(function() {
    $("table tbody tr td:first").click(function() {
        alert(this.text());
    });

    $("<tr><td>Test</td></tr>").appendTo($("table tbody"));
});

Lúc này khi người dùng click vào phần tử tr mới được thêm vào thì trình duyệt sẽ không hiển thị hộp thoại alert. Làm thế nào để đoạn code bind event phía trên vẫn phát huy tác dụng ngay cả với phần tử tr được thêm động vào bảng?

Sử Dụng .on() với jQuery >=1.7

jQuery phiên bản từ 1.7 trở lên cung cấp method .on() cho phép lập trình viên gắn (bind hay attach) hàm event handler vào một phần tử với CSS selector cho trước và trình duyệt sẽ gọi hàm event handler này (hay trigger event) đối với cả những phần tử HTML được thêm động vào trang (tất nhiên cần có cùng CSS selector sử dụng trong binding event):

$(function() {
    $("table tbody tr").on("click", "td:first", function() {
        alert(this.text());
    });

    $("<tr><td>Test</td></tr>").appendTo($("table tbody"));
});

Bây giờ khi bạn click vào phần tử tr mới được thêm bạn sẽ thấy hàm event handler sẽ được gọi và trình duyệt sẽ hiển thị hộp thoại alert.

Sử Dụng .live() với jQuery <1.7

Với jQuery phiên bản trước 1.7 chúng ta sẽ sử dụng một method khác là .live(). Cách sử dụng của .live() giống với click() như sau:

$(function() {
    $("table tbody tr td:first").live("click", function() {
        alert(this.text());
    });

    $("<tr><td>Test</td></tr>").appendTo($("table tbody"));
});

Khi click vào phần tử tr được thêm bạn sẽ thấy kết quả tương tự với trường hợp phiên bản jQuery >1.7+ mà chúng ta đã tham khảo ở phần trước.

Một lưu ý quan trọng đó là bạn không nên sử dụng method .live với cá phiên bản jQuery >=1.7 mà thay vào đó nên sử dụng .on(). Kiến nghị này được đưa ra bởi đội ngũ team phát triển thư viện jQuery.

Kết Luận

Với những trang web mà phần tử HTML được sinh ra động thì việc bind event hanlder sử dụng .on() (hoặc .live() với jQuery <1.7) trở lên rất quan trọng. Các các phần tử HTML động thêm vào sẽ tự động được attach sự kiện mà không cần chúng ta phải thêm code gán event một cách thủ công.