Question

我有一个带有一些切换复选框的表单，问题是当我更改时，我提交表单两次。

我不知道是什么原因。

这是我的代码：

$('.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>

Answer 1

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

您可能有一个带有.switchery类的父元素，或者某个更改事件可能被触发两次。 Chrome检查器中的事件侦听器选项卡可能会有所帮助。

Answer 2

尝试以下

＆＃13;

$(document).ready(function(){
   $('.switchery').on("click touchend" , function(e) {
    var isChecked = $(this).is(":checked");
    console.log('isChecked: ' + $(this).attr('name'));
});
});

＆＃13;

<!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>

＆＃13;

Answer 3

首先，你使用一个Switchery的插件......总是很好的提到它的链接......不是每个人都会读到你的想法（！）。

然后，似乎应该将更改处理程序附加到插件创建的<span> ...而不是<input>。这很简单。 并且不要问我为什么!! 但是很容易找到，看看用户真正点击了什么。

您的问题转载于CodePen。

解决方案：

$(document).ready(function(){

  // Instanciation on each...
  $('.switchery').each(function(){
    new Switchery(this);
  });

  // Change handler.
  $('span.switchery').on("click",function(e) {
    console.log("YO");
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>

<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>

还有CodePen。

Answer 4

单击链接到交换机的标签时，不会触发“ click”事件提供的解决方案...

这是我的解决方法：使用setTimeout稍有延迟...

$('.switchery').change(function(e) {
    //clear the timeout (for the 2nd call)
    clearTimeout($(this).data("timeoutChange"));

    //set the timeout, and link it to your switch
    $(this).data("timeoutChange", setTimeout(function(){
        $.post('http://localhost/centrix/', {"x":"x"}, function(data){
          //  alert(1)
        },"json");
    }),100)
});

Answer 5

这个问题已经过去了几年，但是如果您在这里寻找答案，只需将<input>标记放在<label>标记之外。并且，不要忘记在标签上添加for属性以引用相应的输入（see the specification here）。

<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
  <label class="display-block" for="yes1-input">Overdue</label>
  <input type="checkbox" name="yes1" id="yes1-input" class="switchery" checked="checked">
</div>

jQuery更改事件调用了两次

5 个答案: