Sự kiện Click trong jquery là một công cụ giúp chúng ta kích hoạt những hành động khi nhấp chuột vào một đối tượng html nào đó trên website.
Cú pháp
$(selector).click(function(){
//Code xử lý khi click thành công
});
Trong đó: selector
chính là bộ chọn đến phần tử cần click vào nó. Nó có thể là một phần tử html
, class
, id
…
Lưu ý: Trước khi sử dụng sự kiện click trong jquery bạn cần import thư viện ở trong thẻ <head>
<head>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
Ví dụ 1: Hiển thị thông báo khi click vào thẻ a
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sự kiện Click Jquery</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('h2').click(function(){
alert("Click h2 by Jquery");
});
});
</script>
<h2>Click Jquery</h2>
</body>
</html>
Trong chương trình trên khi click vào h2
thì sẽ hiển thị lên một hộp thoại
Click h2 by Jquery
Tự động kích hoạt sự kiện click vào một đối tượng
Đây là một giải pháp giúp chúng ta muốn tự động kích hoạt sự kiện click vào một đối tượng thông qua một sự kiện khác.
Ví dụ 2: Kích hoạt click vào #target
$( "#other" ).click(function() {
$( "#target" ).click();
});
Qua ví dụ trên bạn thấy khi click vào #other
sẽ tự động kích hoạt sự kiện click vào thẻ #target
Tổng kết
Qua bài viết này bạn đã được tôi giới thiệu về sự kiện click trong Jquery, việc của bạn bây giờ cần cài đặt lại những ví dụ trên để nắm chắc bài học.