时间戳

首页 > 解决方案 > jQuery trigger() stopPropagation() 不工作 - 冒泡发生？

javascript - jQuery trigger() stopPropagation() 不工作 - 冒泡发生？

问题描述

我正在一个具有动态生成按钮的网站上工作。

我正在使用 jQuery根据属性切换隐藏元素的类$('.toggle-button').on('click')（即画布外购物车、侧边栏等）data

我正在使用trigger('click')动态按钮并传递数据以触发正确的隐藏元素。问题是trigger()冒泡到其他有类的按钮，toggle-button或者这就是我认为的问题......

我已经尝试过event.stopPropagation()，但它似乎不起作用。

这是我正在使用的代码的简化版本。

jQuery(document).ready(function($){
  $('.toggle-button').on('click', function(event, triggerData){

    console.log('toggle button triggered');

    toggleClass = '';
    targetSelector = '';
    targetElement = '';

    if ( !triggerData ) {
      toggleClass = $(this).attr('data-toggle');
      targetSelector = $(this).attr('data-target');
    } else {
      toggleClass = triggerData.toggleClass;
      targetSelector = triggerData.targetSelector;
    }

    targetElement = $(targetSelector);
    targetElement.toggleClass(toggleClass);

  });

  $(document).on('click', '.view-cart', function(event){
    event.preventDefault();

    console.log('view cart button clicked');

    $('.toggle-button').trigger('click', {
      toggleClass : 'show',
      targetSelector : '.cart'
    });
  });
});


jQuery(document).ready(function($) {
  $('.toggle-button').on('click', function(event, triggerData) {

    console.log('toggle button triggered');

    toggleClass = '';
    targetSelector = '';
    targetElement = '';

    if (!triggerData) {
      toggleClass = $(this).attr('data-toggle');
      targetSelector = $(this).attr('data-target');
    } else {
      toggleClass = triggerData.toggleClass;
      targetSelector = triggerData.targetSelector;
    }

    targetElement = $(targetSelector);
    targetElement.toggleClass(toggleClass);

  });

  $(document).on('click', '.view-cart', function(event) {
    event.preventDefault();

    console.log('view cart button clicked');

    $('.toggle-button').trigger('click', {
      toggleClass: 'show',
      targetSelector: '.cart'
    });
  });
});
.cart,
.info {
  display: block;
  padding: 30px;
  width: 200px;
  border: 1px solid #000;
  visibility: hidden;
}

.cart.show,
.info.show {
  visibility: visible;
}

.product {
  display: inline-block;
  width: 150px;
  margin: 15px;
  background: #e3e3e3;
  text-align: center;
}

.product a {
  display: block;
  padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <button class="toggle-button" data-toggle="show" data-target=".cart">View Cart</button>

  <button class="toggle-button" data-toggle="show" data-target=".info">View Info</button>
  <hr>

  <div class="product">
    <img src="https://via.placeholder.com/150">
    <a href="/cart" class="view-cart">View Cart</a>
  </div>

  <div class="product">
    <img src="https://via.placeholder.com/150">
    <a href="/cart" class="view-cart">View Cart</a>
  </div>

  <div class="product">
    <img src="https://via.placeholder.com/150">
    <a href="/cart" class="view-cart">View Cart</a>
  </div>

  <div class="product">
    <img src="https://via.placeholder.com/150">
    <a href="/cart" class="view-cart">View Cart</a>
  </div>

  <div class="cart">
    <span>This is your cart</span>
  </div>

  <div class="info">
    <span>This is additional info</span>
  </div>
</body>

</html>

标签： javascriptjquery

解决方案

有两个button类toggle-button......其点击事件被正确触发 - 而问题是，可能只有其中一个应该被触发。通过组合class属性或按id属性选择要单击的元素。这些事件根本没有冒泡，选择器只匹配两个元素 - 这就是它随后点击两个元素的原因。

推荐阅读