jQuery: Sự kiện click không hoạt động sau khi được thêm bằng hàm .append()?

Trong quá trình code web, không ít lần các bạn sẽ cần thêm một phần tử vào trang web bằng javascript (jquery) sau khi một sự kiện nào đó được kích hoạt. Và tiếp theo đó, các bạn lại cần kích hoạt một sự kiện nữa ngay trên phần tử vừa được thêm vào. Lúc này vấn đề mới xảy ra. Ví dụ như sau: Mình có một thẻ `div` và một `button`. Lúc này, mình mong muốn rằng sau khi click vào `button` này, một `button` thứ hai sẽ được thêm vào bên trong thẻ `div`. Và rồi mình lại tiếp tục muốn rằng khi mình click vào `button` thứ hai, thì sẽ hiển thị thông báo trên trình duyệt với dòng chữ `"Hello world!"`. Vậy mình sẽ code như sau: ```html

button thứ hai sẽ được thêm vào sau đây

``` Nếu các bạn chạy thử đoạn code trên, ắt hẳn việc `button` thứ hai được thêm vào là chuyện bình thường, nhưng việc hiển thị thông báo khi `button` thứ hai này được click sẽ không được kích hoạt. Vấn đề này xảy ra vì khi một sự kiện được gắn cho một đối tượng DOM thì đối tượng này cần phải tồn tại trước đó. Nghĩa là các sự kiện sẽ được gắn cho các đối tượng DOM đã được tìm thấy chỉ một lần ngay khi trang web được tải. Vậy nên các phần tử được thêm động sau đó sẽ không được tìm thấy lúc đó để gắn sự kiện. Vậy để làm được điều này, các bạn sẽ phải "ủy nhiệm" sự kiện này cho một đối tượng đã tồn tại từ đầu bằng chức năng `.on()` của jQuery. Điều này cho phép sự kiện được kích hoạt lên đối tượng DOM này, sau đó sẽ chuyển sự kiện đến cho đối tượng DOM phù hợp tiếp theo dựa vào bộ chọn thứ hai mà bạn cung cấp. Tài liệu về chức năng này bạn có thể tìm thấy [ở đây](http://api.jquery.com/on/ "JQuery .on() api"). Trong tài liệu sẽ có rất nhiều thông tin về chức năng `.on()`. Một đoạn thông tin quan trọng liên quan đến trường hợp này

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Vậy đoạn code của chúng ta sẽ sửa lại thành như sau: ```html

button thứ hai sẽ được thêm vào sau đây

``` Như các bạn thấy, trong đoạn code này, mình "ủy nhiệm" sự kiện `click` vào thẻ `div`, vì thẻ `div` này đã được tạo ngay từ đầu. Sau đó, sự kiện `click` này sẽ được thẻ `div` phân phối lại cho đối tượng `button#second`. Các bạn hãy thử lại và xem kết quả nhé. Cám ơn các bạn đã theo dõi bài viết, hãy tiếp tục đón đọc các bài viết mới tại blog [taphuocanh.com].