Question

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

我正在使用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>

Answer 1

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

Answer 2

您的代码具有两个.toggle-button元素，因此$('.toggle-button').trigger()运行两次。

我建议基本上为它们命名不同的类名称。
但是还有另一种方法，您可以使用:first选择器，如下所示。
https://api.jquery.com/first-selector/

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:first').trigger('click', {
      toggleClass : 'show',
      targetSelector : '.cart'
    });
  });
});

jQuery trigger（）stopPropagation（）不起作用-冒泡吗？

2 个答案: