Xử lý sự kiện sau khi thực thi AJAX

Nếu bạn đang viết code jQuery và bạn có áp dụng kỹ thuật AJAX để xử lý dữ liệu, nhưng không may là sự kiện của bạn không hoạt động sau khi cập nhật dữ liệu HTML được lấy từ kết quả trả về của AJAX. Bài viết này mình sẽ cập nhật thông tin xử lý sự kiện sau khi thực thi AJAX cho các bạn chưa biết và đang muốn tìm hiểu về nó.

Nếu bạn lần đầu tiên làm quen với AJAX thì hãy xem lại bài viết hướng dẫn sử dụng AJAX trên WordPress. Trong bài này mình sẽ lấy một ví dụ đơn giản như sau:

<h1>Xử lý sự kiện .on()</h1>
<h2>Chèn link sau khi trang load xong:</h2>
<div id="container"></div>

Mình có đoạn mã HTML như bên trên, trong thẻ div với id là #container hiện không có nội dung bên trong.

jQuery(document).ready(function($) {
    $('#container a').on('click', function(e) {
        e.preventDefault();
        alert('Xử lý sự kiện click!');
    });
    $('#container').append('<a href="#">Click vào đây</a>');
});

Đoạn javascript bên trên mình không sử dụng AJAX, chỉ đơn giản là tạo ra nội dung vào thẻ div container bằng code jQuery. Cụ thể hơn là mình thêm thẻ a vào bên trong thẻ div#container.

body {
    font: 12px Tahoma, Arial, Helvetica, sans-serif;
    color: #333;
    margin: 20px;
}

h1 {
    font-size: 1.4em;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.2em;
}

#container {
    border: dashed 1px #aaa;
    font-size: 1em;
    padding: 10px;
}

a {
    color: green;
}

Bạn sử dụng thêm 1 chút css như bên trên để nội dung hiển thị đẹp hơn. Như vậy, sau khi bạn hoàn thiện code, bạn chạy thử thì sự kiện on click của bạn vào thẻ a sẽ không hoạt động, cái này thì trên các phiên bản jQuery mới sự kiện đã được thay đổi, bạn không cần áp dụng bài viết này nó vẫn chạy.

jQuery(document).ready(function($) {
    $('#container').on('click', 'a', function(e) {
        e.preventDefault();
        alert('Xử lý sự kiện click!');
    });
    $('#container').append('<a href="#">Click vào đây</a>');
});

Bây giờ bạn chỉnh sửa lại một chút javascript như bên trên, sau đó lưu lại và thử thêm lần nữa. Bây giờ thì code của bạn đã hoạt động bình thường. Với đoạn code bên trên, thay vì bạn làm sự kiện click trực tiếp vào thẻ a (nội dung động, tạo ra sau khi tải trang xong), thì hãy áp dụng sự kiện vào cha của nó.

Ngoài ra thì bạn còn có thể áp dụng một vài thủ thuật như bên dưới:

jQuery(document).ready(function($) {
    $('#container a').live('click', function(e) {
        e.preventDefault();
        alert('Xử lý sự kiện click!');
    });
    $('#container').append('<a href="#">Click vào đây</a>');
});

Ví dụ bên trên là mình áp dụng sự kiện live, trên jQuery phiên bản mới thì bạn không cần dùng cái này nữa, chỉ cần sử dụng sự kiện .on mà thôi.

jQuery(document).ready(function($) {
    $('body').delegate('a', 'click', function(e) {
        e.preventDefault();
        alert('Xử lý sự kiện click!');
    });
    $('#container').append('<a href="#">Click vào đây</a>');
});

Ngoài 2 cách ở đầu bài viết thì bạn có thể sử dụng delegate như ví dụ bên trên. Như vậy, qua bài hướng dẫn này thì bạn đã có thể xử lý sự kiện thoải mái trên các thẻ HTML được tạo sẵn hoặc tạo bằng AJAX sau khi tải trang xong. Trong ví dụ này mình không đưa ra ví dụ thực thi AJAX, tuy nhiên cách hoạt động cũng tương tự, cái này bạn có thể áp dụng để viết chức năng phân trang AJAX hoặc là chức năng giỏ hàng cho trang shop. Chúc bạn thành công.

Lại Đình Cường