如何在jQuery中绑定一个元素的事件，但不绑定其子元素

在jQuery中，我们可以使用.on()函数来绑定一个元素的事件，但不绑定其子元素。以下是两个示例，演示如何在jQuery中绑定一个元素的事件，但不绑定其子元素：

示例1：绑定单个事件

以下是一个示例，演示如何使用.on()函数绑定一个元素的事件，但不定其子元素：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() Function Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("ul").on("click", "li:not(.no-bind)", function() {
        $(this).toggleClass("selected");
      });
    });
  </script>
  <style>
    .selected {
      background-color: yellow;
    }
    .no-bind {
      color: gray;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="no-bind">Item 3 (no bind)</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

在这个示例中，我们使用.on()函数绑定了一个“click”事件到“ul”元素上，但不绑定其子元素。我们使用选择器“li:not(.no-bind)”来选择所有不带“no-bind”类的“li”元素，并为它们绑定了一个“click”事件。当用户单击这些元素时，它们将切换一个名为“selected”的CSS类。

示例2：绑定多个事件

以下是一个示例，演示如何使用.on()函数绑定多个事件到一个元素上，但不绑定其子元素：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .on() Function Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("ul").on({
        mouseenter: function() {
          $(this).addClass("hover");
        },
        mouseleave: function() {
          $(this).removeClass("hover");
        }
      }, "li:not(.no-bind)");
    });
  </script>
  <style>
    .hover {
      background-color: yellow;
    }
    .no-bind {
      color: gray;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="no-bind">Item 3 (no bind)</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

在这个示例中，我们使用.on()函数绑定了“mouseenter”和“mouseleave”事件到“ul”元素上，但不绑定其子元素。我们使用选择器“li:not(.no-bind)”来选择所有不带“no-bind”类的“li”元素，并为它们绑定了“mouseenter”和“mouseleave”事件。当用户将鼠标悬停在这些元素上时，它们将获得一个名为“hover”的CSS类。

综上所述，我们可以使用.on()函数来绑定一个元素的事件，但不绑定其子元素，并提供了两个示例，演示如何使用.on()函数绑定单个和多个事件到一个元素，但不绑定其子元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在jQuery中绑定一个元素的事件，但不绑定其子元素 - Python技术站