如何让 JQuery 感知动态加载 HTML 中的 id 元素?

jqueryhtmlweb developmentfront end technology更新于 2024/4/22 2:52:17

本文将介绍如何让 JQuery 感知动态加载 HTML 中的 id 元素。

通常，当我们想要将元素绑定到任何事件时，可以使用 on() 方法直接绑定到每个元素的任何事件。让我们深入研究本文，以便更好地理解。

jQuery on() 方法

jQuery 内置方法 on() 用于向 DOM 树中选定的元素及其后代元素添加一个或多个事件处理程序。DOM(文档对象模型)是万维网联盟 (WWW) 的一项标准。此方法解释了如何获取 DOM 树中的项目。

语法

以下是 JQuery on() 方法的语法

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

示例

在下面的示例中，我们使用 JQuery 的 on() 方法运行脚本，点击文本后会创建一个新段落。

<!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>

当脚本执行时，它将生成由文本以及网页上应用的 CSS 组成的输出。当用户点击文本时，会触发一个事件，该事件会在网页上的给定文本中添加额外的段落。

使用 delegate() 函数

jQuery 中的 delegate() 方法用于指定每次事件发生时执行的函数，以及向所选元素的子元素添加一个或多个事件处理程序。

语法

以下是 delegate() 函数的语法 -

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

示例

请考虑以下示例，其中我们使用 delegate() 函数，该函数在点击文本时将额外的段落添加到父文本中。

<!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>

运行上述脚本后，输出窗口将弹出，并在网页上显示文本及其应用的 CSS。当用户点击文本时，事件会被触发，并将段落添加到父文本中。