Событие изменения jQuery вызывается два раза - PullRequest
Новая
       27

Событие изменения jQuery вызывается два раза

0 голосов
/ 10 июня 2018

У меня есть форма с некоторыми флажками переключения, проблема в том, что когда я меняюсь, я отправляю форму два раза.

Я не знаю, в чем причина.

Этомой код: 

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

Ответы [ 4 ]

0 голосов
/ 23 августа 2019

Решения, предоставляемые с событием «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)
});
0 голосов
/ 10 июня 2018

Попробуйте следующее 

$(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>
0 голосов
/ 10 июня 2018

Во-первых, вы используете плагин 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 .

0 голосов
/ 10 июня 2018 

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

Возможно, у вас есть родительский элемент с классом .switchery, или, может быть, событие change дважды вызывается чем-то.Вкладка прослушивателей событий в Инспекторе Chrome может быть полезна.

...