jQuery中on绑定事件后引发的事件冒泡问题如何解决

针对jQuery中on绑定事件后引发的事件冒泡问题，解决方式有以下两种：

1. 使用stopPropagation()方法阻止冒泡

首先介绍的是最为常见的解决方式，即使用stopPropagation()方法阻止事件冒泡。

当在一个父级元素上使用on()方法绑定子元素的事件时，子元素触发的事件会一直冒泡到父级元素，甚至最终冒泡到document元素，影响页面的其他元素。

此时，我们可以在事件处理函数中使用stopPropagation()方法停止事件冒泡。该方法的作用是阻止事件冒泡到父级元素或document元素。

示例代码如下：

<div id="parent">
  <button id="child">点击</button>
</div>

<script>
  $('#parent').on('click', function () {
    console.log('父级元素被点击了');
  });

  $('#child').on('click', function (event) {
    event.stopPropagation(); // 阻止事件冒泡
    console.log('子元素被点击了');
  });
</script>

在上述示例中，当按钮被点击时，由于调用了stopPropagation()方法，事件不会向父级元素冒泡，因此只会输出“子元素被点击了”。

2. 使用off()方法解绑事件

第二种解决方式是使用off()方法解绑事件。

在使用on()方法绑定事件时，DOM元素会保留该事件的绑定，因此当该元素再次触发该事件时，之前绑定的事件会再次被触发，导致问题。

此时，我们可以在使用on()方法绑定事件的同时，使用off()方法解绑该事件。该操作会删除该元素上的所有事件绑定，然后再重新绑定事件，避免之前绑定的事件被重复触发。

示例代码如下：

<div id="parent">
  <button id="child">点击</button>
</div>

<script>
  $('#parent').on('click', '#child', function () {
    console.log('事件被触发了');
    $('#parent').off('click', '#child'); // 解绑事件
  });
</script>

在上述示例中，当按钮被点击时，事件被触发，并调用了off()方法解绑该事件，避免之后重复触发该事件。

希望以上两个解决方式对您有所帮助。