What are use of delegate and undelegate method in JQuery.

2 votes
41 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What are use of delegate and undelegate method in JQuery.

1 Answer

0 votes
Ravi Vishwakarma answered 03-Aug-2021 by Ravi Vishwakarma

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>

What are use of delegate and undelegate method in JQuery.