In the code snippet below, you can press yellow buttons and make them green. However, if you click them again, they don’t become yellow again even though I have that covered in my script as well. I discovered a similar problem in my project (of course, it’s not just about the color). It appears, jQuery scripts “remember” the HTML they “saw” the first time the page was loaded and never consider any changes to the code a user may make. If the page is refreshed, my scripts work the other way too
$(document).ready(function () {
$('td a.btn-outline-warning').on('click', async function () {
let username = $(this).closest('tr').children().eq(0).text();
console.log(`username in disable event handler: ${username}`);
// ...
$(document).ready(function () {
$('td a.btn-outline-success').on('click', async function () {
let username = $(this).closest('tr').children().eq(0).text();
console.log(`username in enable event handler: ${username}`);
// ...
Why does this happen and how do I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-hover text-center">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Last name</th>
<th scope="col">Department</th>
<th scope="col">Buttons</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>IT</td>
<td class="btn-group btn-group-sm">
<a class="btn btn-outline-warning" href="#">Yellow button</a>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>HR</td>
<td class="btn-group btn-group-sm">
<a class="btn btn-outline-warning" href="#">Yellow button</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
$('td a.btn-outline-warning').on('click', async function () {
$(this).removeClass('btn-outline-warning')
.addClass('btn-outline-success')
.text('Green button');
});
});
$(document).ready(function () {
$('td a.btn-outline-success').on('click', async function () {
$(this).removeClass('btn-outline-success')
.addClass('btn-outline-warning')
.text('Yellow button');
});
});
</script>
</body>
</html>