How TO Make JQuery Aware Of Id Elements In Dynamically Loaded HTML?


The task we are going to perform in this article was how to make JQuery aware of id elements in dynamically loaded HTML.

Normally, we could use the on() method to directly bind to any event of each element when we wanted to tie it to any event. Let’s dive into the article for getting better understanding.

jQuery on() method

The built-in method jQuery on() is used to add one or more event handlers to the selected elements and their descendant elements in the DOM tree. A World Wide Web Consortium standard is the DOM (Document Object Model). This method explains how to get at items in the DOM tree.

Syntax

Following is the syntax for JQuery on() method

$(selector).on(event, childSelector, data, function)

Example

In the following example, we run a script using JQuery's on() method. which will create a new paragraph upon clicking the text.

<!DOCTYPE html>
<html>
   <body style="background-color:#D1F2EB">
   <style>
      li {
         font-size: 30px;
         width: 400px;
         padding: 20px;
         color: #A569BD;
      }
   </style>
   <ol id="list">
      <li>Welcome, Click To Know More</li>
   </ol>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      $(document).ready(function () {
         $("#list").on("click",
         "li", function (event) {
            $('#list').append(
            '<li>Tutorialspoing..!The Best E-way Learning</li>');
            $('#list').append(
            '<li>Where You Can Find A Lot Of Courses</li>');
         });
      });
   </script>
   </body>
</html>

When the script gets executed, it will generate an output consisting of text along with the applied CSS on the webpage. When the user clicks on the text, an event gets triggered that adds extra paragraphs to the given text on the webpage.

Using delegate() function

The delegate() Method in jQuery is used to specify a function that will be executed each time an event occurs as well as to add one or more event handlers to the given element that are children of the selected elements.

Syntax

Following is the syntax of delegate() function -

$(selector).delegate( childSelector, event, data, function )

Example

Consider the following example, where we are using the delegate() function, which adds the extra paragraphs to the parent text on clicking the text.

<!DOCTYPE html>
<html>
   <body style="background-color:#CCCCFF">
      <style>
         li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: #DE3163;
         }
      </style>
      <ul id="list">
         <li>Making Maagi</li>
      </ul>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
      $(document).ready(function() {
         $("#list").delegate("li", "click", function(event) {
            $('#list').append(' < li > Boil Water < /li>');
            $('#list').append(' < li > Add Masala < /li>');
            $('#list').append(' < li > Add Broken Maggi Pieces < /li>');
            $('#list').append(' < li > Leave For 3 - 4 MInutes < /li>');
         });
      });
      </script>
   </body>
</html>

On running the above script, the output window will pop up, displaying the text along with the applied CSS on the webpage. When the user clicks the text, the event gets triggered and adds paragraphs to the parent text.

Updated on: 20-Apr-2023

575 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements