博客

jQuery delegate()方法

  • Post category:jquery

当我们添加事件监听器时，它只会应用于已经存在于DOM中的元素。然而，当我们使用delegate()方法时，事件监听器将会应用于任何新增的元素，甚至是动态生成的元素。下面就来详细讲解一下jQuery delegate()方法的相关内容。

delegate()方法的语法

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

参数说明：

  • selector：必须，用于选中初始元素。
  • childSelector：必须，用于选中被监听的子元素。
  • event：必须，表示要监听的事件类型，如click、mouseover等等。
  • data：可选，传入一个对象，在事件处理函数中可以通过event.data属性获得该对象。一般用于传递描述事件的数据或状态。
  • function：必须，表示事件发生时要执行的函数(即事件回调函数)。

使用delegate()方法的示例一

下面是一个简单的例子，当用户单击任何新增的按钮时会在控制台中输出文本。如果我们只使用click()方法，那么我们只能针对当前文档中存在的DOM元素添加事件监听器， 这意味着事件将不会被监听到任何新创建的按钮上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery delegate()方法示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
          $("#btn-container").delegate("button", "click", function() {
            console.log("Button clicked!");
          });

          $("#add-btn").click(function() {
            var btn = $("<button></button>").text("New Button");
            $("#btn-container").append(btn);
          });
        });
    </script>
</head>
<body>
    <div id="btn-container">
      <button>Old Button</button>
    </div>
    <button id="add-btn">Add Button</button>
</body>
</html>

在上面的代码中，我们首先通过delegate()方法将#btn-container内的所有button元素绑定了click事件监听器。当监听到该事件时，控制台将会打印“Button clicked!”的提示信息。而通过单击Add Button按钮，我们可以动态地向文档中添加新的按钮元素。

使用delegate()方法的示例二

有时我们需要根据数据来创建不同的元素，例如一系列数字需要以列表的形式呈现，可以根据数字来动态创建相应的li元素。这个时候，我们可以使用delegate() 方法对这些元素进行事件监听。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery delegate()方法示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
          $('#number-list').delegate("li", "click", function() {
            alert($(this).text());
          });

          // 动态添加 li 元素
          for (var i = 0; i < 10; i++) {
            var li = $("<li></li>").text(i);
            $("#number-list").append(li);
          }
        });
    </script>
</head>
<body>
    <ul id="number-list">

    </ul>
</body>
</html>

在上面的代码中，我们使用了delegate()方法对ul元素下的所有li元素进行点击事件的监听，当li元素被点击时，将会弹出一个包含当前li元素内容的alert对话框。而动态创建li元素的过程则需要在页面DOM结构及脚本加载完成后运行。

以上就是关于jQuery delegate()方法的详细介绍及相关示例。

Tags: