Question

我目前正在制作checkbox附加label。我使用for属性链接复选框的点击。

我还有一个jQuery函数，onclick用于复选框，标签容器为文本输入字段执行幻灯片切换。

当我单击该复选框时，只检测到一次单击，文本字段很好地向下滑动。但是，当我点击标签时，似乎发生了双击，因此文本字段向下滑动然后立即备份。

我的复选框上有toggle-checkbox的ID，而我的标签上有for="toggle-checkbox"，我怀疑它会以某种方式触发额外点击。

HTML：

<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

JavaScript的：

jQuery('.js-coupon-code').click(function() {
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

CSS：

.coupon-code {
  display: none;
}

我有created a codepen可以重现问题。

Answer 1

您只需要preventDefault()

//toggle promo code input field
jQuery('.js-coupon-code').click(function(e) {
  e.preventDefault();
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

Answer 2

我建议将事件从click更改为复选框change。

jQuery('.cart-summary__coupon-code__checkbox').change(function() {
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

这是固定的codePen

Answer 3

当您点击for="toggle-checkbox"时在label中使用label时，它也会点击checkbox。因此，父事件的click事件会触发两次事件冒泡。使用checkbox的点击事件代替.js-coupon-code。

＆＃13;

jQuery('#toggle-checkbox').click(function() {
    $(".coupon-code").slideToggle("slow", function() {});
});

＆＃13;

.coupon-code {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

＆＃13;

Answer 4

只需绑定click的{{1}}事件即可。它也适用于相应的input#toggle-checkbox。

注意：为什么我这样说，在您的示例中，您只需尝试在label和checkbox之间点击，您的切换操作就会发生。

检查此示例：

label

jQuery('#toggle-checkbox').click(function() {
  $(".coupon-code").slideToggle("slow", function() {});
});

.coupon-code {
  display: none;
}

为什么点击切换复选框变为双击？

4 个答案: