jQuery更改事件调用了两次》

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (528)

我有一个带有一些开关复选框的表单,问题是当我更改时,我提交了两次表单。

我不知道原因是什么。

这是我的代码:

$('.switchery').change(function(e) {
  //var isChecked = $(this).is(":checked");
  //console.log('isChecked: ' + $(this).attr('name'));

  $.post('http://localhost/centrix/', {"x":"x"}, function(data){
    //  alert(1)
  },"json");
});

我的HTML代码:

<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes1" class="switchery" checked="checked">
    Overdue
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes2" class="switchery">
    Today
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes1" class="switchery" checked="checked">
    Tomorrow
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" class="switchery" checked="checked">
    Open
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" class="switchery">
    Completed
  </label>
</div>
提问于
用户回答回答于

尝试以下几种方法

$(document).ready(function(){
   $('.switchery').on("click touchend" , function(e) {
    var isChecked = $(this).is(":checked");
    console.log('isChecked: ' + $(this).attr('name'));
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes1" class="switchery" checked="checked">
    Overdue
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes2" class="switchery">
    Today
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" name="yes1" class="switchery" checked="checked">
    Tomorrow
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" class="switchery" checked="checked">
    Open
  </label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block">
    <input type="checkbox" class="switchery">
    Completed
  </label>
</div>

</body>
</html>

用户回答回答于

$('.switchery').click(function(e) {
  e.stopImmediatePropagation()
  ...

你可能有一个带有.Switery类的父元素,或者更改事件被某些东西触发了两次。Chrome检查器中的事件侦听器选项卡可能会有所帮助。

扫码关注云+社区

领取腾讯云代金券