两次调用 jQuery 更改事件答案

【问题标题】：jQuery change event called two times两次调用 jQuery 更改事件
【发布时间】：2018-06-09 23:52:08
【问题描述】：

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

不知道是什么原因。

这是我的代码：

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

【问题讨论】：

如果您check 或un-check 给定的复选框，这取决于代码的实际布局或使用情况如何当前代码不会发送请求两次。见FIDDLE
我会把它改成 "$('[input type="checkbox"']).on( "mousedown", function(e) {" 然后查询复选框的状态。跨度>
同样的问题 :(
我们这里的标题中没有“SOLVED”

标签： javascript jquery switchery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试下面的

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

【讨论】：

解决了标签中的问题，参考github.com/abpetkov/switchery/issues/50

【解决方案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。

【讨论】：

【解决方案4】：

当您点击链接到您的开关的标签时，不会触发“点击”事件提供的解决方案...

这是我的解决方法：使用 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)
});

【讨论】：

【解决方案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>

【讨论】：