.on()

Định nghĩa và sử dụng

  • .on(): Đính kèm một hàm xử lý sự kiện cho một hoặc nhiều sự kiện tới một thành phần được chọn.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.7

.on('Sự kiện', function(){...})

$('p').on('click', function(){
    alert($(this).text());
});

.on('Sự kiện', 'Bộ chọn', function(){...})

$('body').on('click', 'a', function(){
    event.preventDefault();
});

.on('Sự kiện', function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('td').on('click',function(){
        var txt = $(this).text();
        $('span').text(txt);
    });
});
</script>
</head>

<body>
<span>Nội dung td</span>
<table border="1">
<tr>
    <td>TD 01</td>
    <td>TD 02</td>
    <td>TD 03</td>
</tr>

<tr>
    <td>TD 11</td>
    <td>TD 12</td>
    <td>TD 13</td>
</tr>

<tr>
    <td>TD 21</td>
    <td>TD 22</td>
    <td>TD 23</td>
</tr>
</table>
</body>
</html>

Hiển thị trình duyệt:

Click vào từng td để thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<span>Nội dung td</span>
<table border="1">
<tr>
<td>TD 01</td>
<td>TD 02</td>
<td>TD 03</td>
</tr>

<tr>
<td>TD 11</td>
<td>TD 12</td>
<td>TD 13</td>
</tr>

<tr>
<td>TD 21</td>
<td>TD 22</td>
<td>TD 23</td>
</tr>
</table>

<span>TD 22</span>
<table border="1">
<tr>
<td>TD 01</td>
<td>TD 02</td>
<td>TD 03</td>
</tr>

<tr>
<td>TD 11</td>
<td>TD 12</td>
<td>TD 13</td>
</tr>

<tr>
<td>TD 21</td>
<td>TD 22</td>
<td>TD 23</td>
</tr>
</table>
</div>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p {
    background-color: yellow;
}
.active {
   color: blue;
   font-weight: bold;
}

.over {
    background-color: #ebc90c;
}
</style>
<script>
$(function(){
    $('p').on({
        click: function(){
            $(this).toggleClass("active");
        },
        mouseenter: function(){
            $(this).addClass("over");
        },
        mouseleave: function(){
            $(this).removeClass("over");
        }
    });
});
</script>
</head>

<body>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Click và di chuyển chuột vào thành phần p để thấy kết quả.

.on('Sự kiện', 'Bộ chọn', function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { background-color: yellow; }
</style>
<script>
$(function(){
    var i = 0;
    $('body').on('click', 'button', function(){
        $(this).after("<p>Another paragraph! "+(++i)+"</p>");
    });
});
</script>
</head>

<body>
<div>
<button>Click</button>
</div>
</body>
</html>

Hiển thị trình duyệt:

Click liên tục vào button sẽ thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<button>Click</button>

<button>Click</button>
<p>Another paragraph! 3</p>
<p>Another paragraph! 2</p>
<p>Another paragraph! 1</p>

THÔNG BÁO LỖI