jQuery delegate()

The delegate () method is used to attach one or more event handlers for specified elements which are the children of selected elements. This method executes a function to run when the event occurs.

The attached event handlers with the delegate () method works for both current and future elements.

Syntax:

Parameters of jQuery delegate() event

Parameters	Description
ChildSelector	It is a mandatory parameter that is used to specify one or more child elements to attach the event handler.
Event	It is also a mandatory parameter. It specifies one or more events to attach to the elements. If you use multiple events then they must be separated by space.
Data	It is optional and specifies additional data to pass along to the function.
Function	It is executed when the event occurs.

Let's take a jQuery delegate () example.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>This is a single paragraph. Click me for next.</p>
<script>
$( "body" ).delegate( "p", "click", function() {
  $(this ).after( "<p>Click me for another paragraph.</p>" );
});
</script>
</body>
</html>

Test it Now

Next TopicjQuery ajax() method

← prev next →