Đoạn code dưới đây được thực hiện cho một ứng dụng có yêu cầu là định nghĩa 1 sự kiện click cho tất cả button trong trang, bao gồm cả những button có thể được thêm vào sau một cách tự động.

// define the click handler for all buttons
$( "button" ).bind( "click", function() {
    alert( "Button Clicked!" )
});

/* ... some time later ... */

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

Trả lời:

Các button được tự động thêm vào sau khi gọi hàm bind() sẽ không có phần xử lý click trên, bởi vì hàm bind() chỉ thêm các xử lý sự kiện tới các thẻ đã tồn tại ngay tại thời điểm gọi hàm bind().

Vấn đề này được giải quyết với các function sử dụng ‘event bubbling’ để  lắp các sự kiện vào các thẻ hiện tại và tương lai.

Trong quá khứ, việc này được thực hiện bằng cách thay thể hàm bind() bằng hàm live().

Hàm live() không được dùng trong jquery 1.7 nữa. Hàm delegate() cũng hoạt động như hàm live() nhưng cung cấp thêm quyền kiểm soát một sự kiện mất bao lâu để nổi lên (bubble up) trên DOM.

Tuy nhiên, hàm được đề xuất sử dụng là on(). Nó có thể hành động như bind(), live(), hay delegate() tùy theo cú pháp. Đoạn code dưới đây dùng để sửa chữa lỗi trên:

// define the click handler for all buttons
$( document ).on( "click", "button", function() {
    alert( "Button Clicked!" )
});

/* ... some time later ... */

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

Event Bubbling là cách mà event được lan truyền từ DOM con lên DOM cha. Nghĩa là, khi chúng ta click trên một phần tử con thì event click của phần tử cha nó cũng được gọi.