.on() trong jQuery

Định nghĩa và sử dụng .on() trong jQuery

.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 .on() trong jQuery

Đã đượ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ả.

.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ả.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·