We do that of jquery delegate event when we have to bind event on both parent and child then we do it and it works like this, if removes event of both parent and child then use the undelegate event.
Syntax$(selector).delegate(childSelector, event, function)
$(selector).delegate(childSelector, event, data, function)$(selector).undelegate ()
$(selector).undelegate (selector, event)
$(selector).undelegate (selector, event, function)
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<!-- Bootstrap CSS -->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
<title>ready function </title>
</head>
<body>
<div class='container'>
<h1 class='text-center mt-5'>delegate and undelegate function </h1>
<p class=' m-2 bg-warning p-1 rounded-3 text-capitalize px-5 text-center'>Click me for add new line</p>
<button>undelegate</button>
</div>
<script>
$(document).ready(function () {
$('body').delegate('p','click', function () {
$(this).after('<p>Hello the is delegate</p>');
});
$('button').click(function () {
$('body').undelegate('p', 'click');
});
});
</script>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>
