我正在开发一个具有动态生成按钮的网站。
我使用jQuery基于data属性切换隐藏元素$('.toggle-button').on('click')(即画布外的购物车、侧边栏等(的类
我将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>有两个button和类toggle-button。。。其点击事件被正确触发——而问题是，可能只应该触发其中一个。通过组合的class属性或id属性选择要单击的元素。这些事件根本没有冒泡，选择器只匹配两个元素，这就是它随后单击两个元素的原因。
您的代码有两个.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'
});
});
});