How to run a code on double-click event in jQuery ?

How to Click on header to add another header in jQuery ?

Last Updated : 25 Mar, 2021

In this article, we will see how to add a new header element after clicking the existing header elements in jQuery. To add the new header element, the delegate() method is used.

Syntax:

$(selector).delegate("Selected_elements", function() {
    $(this).after("content");
})

Here, we use delegate() method to add one or more event handlers to the specified element that are children of selected elements. Also, we use after() method to insert content, specified by the parameter for each selected element in the set of matched element.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Click on header to add
        another header in jQuery?
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("body").delegate("h1, h3", "click", function () {
                $(this).after("<h4>Added Another Header!</h4>");
            });
        });
    </script>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to Click on header to add
        another header in jQuery?
    </h3>
</body>

</html>

Output:

How to run a code on double-click event in jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to run a code on click event in jQuery ?

In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h

How to run a code on double-click event in jQuery ?

In this article, we will see how to run a code after double clicked the element using jQuery. To run the code on double clicked we use dblclick() method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Syntax: $(sel

How to add dbclick() on right click in jQuery?

The jQuery dblclick() method is used to detect whenever a particular element is double-clicked. This method only detects left mouse button double clicks and not the right mouse button double clicks. In this article, we will see how to simulate the double right mouse click in jQuery. Approach: There

How to hide all heading elements on a page when they are clicked in jQuery ?

In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery.Here we have two common approaches. Using slideUp() methodUsing hide() method Approach 1: Using slideUp() method To hide all heading elements from the page, we use slideUp() method. First, we use

How to attach a click and double-click event to an element in jQuery ?

In this article, we will see how to attach a click and double-click event to an element in jQuery. To attach click and double-click events, click and dbclick events are used. These events are attached with the bind() method. This method is used to attach one or more event handlers for selected eleme

How to Add or Remove class in jQuery ?

In this article, we are going to learn about the different methods to add and remove classes from an HTML element using jQuery. There are two ways in which we can achieve this in jQuery.Table of Content Using the addClass() and removeClass() methodsUsing the toggleClass() methodUsing the addClass()

How to add jQuery code to HTML file ?

In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and

How to add a class on click of anchor tag using jQuery ?

In this article, we will see how to add a class on click of an anchor tag using jQuery. To add a class on click of the anchor tag, we use the addClass() method. The addClass() method is used to add more properties to each selected element. It can also be used to change the property of the selected e

How to Double click on a div element to toggle background color in jQuery ?

In this article, we will see how to make a double click event on a paragraph element to toggle background color in jQuery. To toggle the background color of a div element on double-click, toggleClass() method is used. The toggleClass() method is used to toggle or change the class which attached with

How to perform click-and-hold operation inside an element using jQuery ?

Given an HTML element and the task is to click and hold an element in a document for a few seconds to perform the operation using jQuery. Approach: Select an HTML element. Add the event listener to that element and add a timeOut timer for that event. If that event happens to active for few seconds t