I'm building a Django Application and stuck at the JQuery issue. When I click on the Paragraph with class 'select' it triggers the jQuery click event, the issue is when I change the class name from 'select' to 'selected' using JQuery, it still triggers the 'select' class click event whereas it is supposed to not be called after removing the 'select' class. Here is the sample code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".select").on('click', function(){
$(this).addClass('dont_select')
$(this).removeClass('select');
alert("Click event called")
});
});
</script>
</head>
<body>
<p class='select'>Change Class Using Jquery</p>
</body>
</html>
Can someone please explain the solution?