blocks|key|4194722|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4194723|$('.switchery').click(function(e)+{
++e.stopImmediatePropagation()
++...|code-block|syntax|javascript|4194724|4194725|您可能有一个带有.switchery类的父元素，或者更改事件被某些东西触发了两次。Chrome检查器中的事件侦听器选项卡可能会有所帮助。|4194726|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.switchery').click(function(e) {
  e.stopImmediatePropagation()
  ...</code></pre>
</div>
</div>
</p>

<p>You might have a parent element with a .switchery class, or maybe the change event is being triggered twice by something. The event listeners tab in Chrome inspector might be helpful.</p>


blocks|key|4194745|text|请尝试以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4194746|​|4194747|$(document).ready(function(){
+++$('.switchery').on("click+touchend"+,+function(e)+{
++++var+isChecked+=+$(this).is(":checked");
++++console.log('isChecked:+'+%2B+$(this).attr('name'));
});
});|code-block|syntax|javascript|4194748|<!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>|4194749|4194750|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try the following </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   $('.switchery').on("click touchend" , function(e) {
    var isChecked = $(this).is(":checked");
    console.log('isChecked: ' + $(this).attr('name'));
});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="checkbox checkbox-switchery checkbox-right switchery-xs"&gt;
  &lt;label class="display-block"&gt;
    &lt;input type="checkbox" name="yes1" class="switchery" checked="checked"&gt;
    Overdue
  &lt;/label&gt;
&lt;/div&gt;
&lt;div class="checkbox checkbox-switchery checkbox-right switchery-xs"&gt;
  &lt;label class="display-block"&gt;
    &lt;input type="checkbox" name="yes2" class="switchery"&gt;
    Today
  &lt;/label&gt;
&lt;/div&gt;
&lt;div class="checkbox checkbox-switchery checkbox-right switchery-xs"&gt;
  &lt;label class="display-block"&gt;
    &lt;input type="checkbox" name="yes1" class="switchery" checked="checked"&gt;
    Tomorrow
  &lt;/label&gt;
&lt;/div&gt;
&lt;div class="checkbox checkbox-switchery checkbox-right switchery-xs"&gt;
  &lt;label class="display-block"&gt;
    &lt;input type="checkbox" class="switchery" checked="checked"&gt;
    Open
  &lt;/label&gt;
&lt;/div&gt;
&lt;div class="checkbox checkbox-switchery checkbox-right switchery-xs"&gt;
  &lt;label class="display-block"&gt;
    &lt;input type="checkbox" class="switchery"&gt;
    Completed
  &lt;/label&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4194786|text|"+click“事件提供的解决方案不会在您单击链接到您的交换机的标签时触发...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4194787|这是我的变通办法:使用一个延迟很小的setTimeout+...|4194788|$('.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)
});+|code-block|syntax|javascript|4194789|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Solutions provided with "click" event do not trigger when you click on the label linked to your switch...</p>

<p>Here is my workaround : use a setTimeout with a small delay...</p>

<pre><code>$('.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)
}); 
</code></pre>


blocks|key|4195283|text|这个问题已经过去了几年，但如果你在这里寻找答案，只需将你的<input>标签放在<label>标签之外。并且，不要忘记在标签中添加for属性以引用相应的输入(see+the+specification+here)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4195284|<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>|code-block|syntax|javascript|4195285|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1^0|T|7|14|7|1T|3|27|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>A few years has passed from the question, but if you are here for the answer, simply put your <code>&lt;input&gt;</code> tag outside of <code>&lt;label&gt;</code> tag. And, do not forget to add <code>for</code> attribute to your label to refer to the corresponding input (<a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1" rel="nofollow noreferrer">see the specification here</a>).</p>
<pre><code>&lt;div class=&quot;checkbox checkbox-switchery checkbox-right switchery-xs&quot;&gt;
  &lt;label class=&quot;display-block&quot; for=&quot;yes1-input&quot;&gt;Overdue&lt;/label&gt;
  &lt;input type=&quot;checkbox&quot; name=&quot;yes1&quot; id=&quot;yes1-input&quot; class=&quot;switchery&quot; checked=&quot;checked&quot;&gt;
&lt;/div&gt;
</code></pre>


<p>I have a form with some switchery checkboxes, the problem is when I change, I submit the form two times.</p>

<p>I don't know what is the cause.</p>

<p>This is my code : </p>

<pre><code>$('.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");
});
</code></pre>

<p>My HTML code : </p>

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


jQuery change event called two times

我有一个带有切换复选框的表单，问题是当我更改时，我会提交两次表单。我不知道是什么原因造成的。这是我的代码：$('.switchery').change(function(e) {  //var isChecked = $(this).is(":checked");  //console.log('isChecked: ...

问jQuery更改事件调用两次
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery更改事件调用两次EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery更改事件调用两次
EN