DEV Community

Cover image for jQuery : Adding Event Listeners to HTML elements even before they are rendered
Rohit Gupta
Rohit Gupta

Posted on

1

jQuery : Adding Event Listeners to HTML elements even before they are rendered

Intro

This article will help you setup event listeners for dynamic elements on the webpage using JQuery.

Pre-requisites

Basic knowledge of JQuery Selectors, Basic event handling in Javascript

Lets Start

  • Create a basic html with our jQuery dependency
<html>
  <head>
    <!-- add jquery dependency -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  </head>
  <body>
    <div class="main">
      <!-- button will appear here -->
    </div>
    <script>
      let buttonHtml = `<button class="btn">Click to turn me RED</button>`
      // add a button 1 second after document is loaded
      $(document).ready(function () {
        setTimeout(() => {
          $(".main").append(buttonHtml);
        }, 1000)
      })


    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This code just adds a button with class btn inside our main div.

Wrong Approach

  • Let's start with what I was doing wrong earlier.
  • Adding more lines to our script that should add a click listener to my button
// on click of our selector, turn our button RED
$(".btn").on('click', function(){
  $(this).css('background','red');
})

Enter fullscreen mode Exit fullscreen mode

Well, See in action

Wrong Approach GIF

Correct Approach

  • I checked for jQuery documentation and found that there is also an event-delegation approach

// Taken from https://api.jquery.com/on/

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

So, all I had to do was add another parameter to our method and change the selector.

So Basically,

Tell our browser, that whenever there is a click event on our .main class element, check if it was made on the .btn specifically.

So I replaced my previous code with this.

$('.main').on('click','.btn', function(){
  $(this).css('background','red');
})
Enter fullscreen mode Exit fullscreen mode

That was it. Boom!

Correction GIF

Thank you note.

Thanks for reading. Like and follow for more such articles.
Happy to engage in healthy discussion in comments.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more