библиотека jQuery события click стрельбы несколько раз

.unbind() является устаревшим, и вы должны использовать .off() метод вместо этого. Просто позвоните .off() прямо перед звонком .on().

это удалит все обработчики событий:

$(element).off().on('click', function() {
    // function body
});

чтобы удалить только зарегистрированные обработчики событий "click":

$(element).off('click').on('click', function() {
    // function body
});

.один()

лучшим вариантом было бы .one():

обработчик выполняется не более одного раза на элемент для каждого типа события.

$(".bet").one('click',function() {
    //Your function
});

---

в случае нескольких классов, и каждый класс должен быть раз нажал,

$(".bet").on('click',function() {
    //Your function
    $(this).off('click');   //or $(this).unbind()
});

Если вы обнаружите, что .прочь. )(уберите() или .stopPropagation () все еще не исправляет вашу конкретную проблему, попробуйте использовать .stopImmediatePropagation() отлично работает в ситуациях, когда вы просто хотите, чтобы ваше событие обрабатывалось без каких-либо пузырей и без воздействия на какие-либо другие события, которые уже обрабатываются. Что-то вроде:

$(".bet").click(function(event) {
  event.stopImmediatePropagation();
  //Do Stuff
});

делает трюк!

Если вы вызываете эту функцию на каждом "щелчке", то это добавлять еще одна пара обработчиков при каждом вызове.

добавление обработчиков с помощью jQuery просто не похоже на установку значения атрибута "onclick". Можно добавить столько обработчиков, сколько вы хотите.

Это старая проблема, но я столкнулся с ней сегодня, и я думаю, что мой ответ поможет будущему искателю подобных проблем.

он выполняется несколько раз, потому что функция "on('click', somefunction)" вызывается несколько раз и, следовательно, она привязывается несколько раз - чтобы навсегда решить эту проблему, вам нужно убедиться, что функция "on" находится в таком месте, что она будет выполняться только один раз. после чего на событие щелчка мыши, функция будет запущена только однажды.

например, если я ставлю " on ('click', somefunction)" в место, где он будет загружен дважды, то при каждом щелчке - "somefunction" будет срабатывать дважды.

в правильной логической последовательности "функция" следует использовать только тогда, когда вы действительно намерены отменить привязку событий. использовать его для скрытия логических ошибок, вызванных двойной загрузкой функции "on", не очень хороший подход, даже если он может показаться работающим.

у меня была проблема из-за разметки.

HTML:

<div class="myclass">
 <div class="inner">

  <div class="myclass">
   <a href="#">Click Me</a>
  </div>

 </div>
</div>

jQuery

$('.myclass').on('click', 'a', function(event) { ... } );

вы заметили, что у меня есть один и тот же класс "myclass" дважды в html, поэтому он вызывает click для каждого экземпляра div.

Все об этом .на() и .один() велик, и jQuery-это замечательно.

но иногда, вы хотите, чтобы это было немного более очевидно, что пользователь не может нажать, и в этих случаях вы могли бы сделать что-то вроде этого:

function funName(){
    $("#orderButton").prop("disabled", true);
    //  do a bunch of stuff
    // and now that you're all done
    setTimeout(function(){
        $("#orderButton").prop("disabled",false);
        $("#orderButton").blur();
    }, 3000);
}

и ваша кнопка будет выглядеть так:

<button onclick='funName()'>Click here</button>

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

решение, которое сработало для меня:

убить все события, прикрепленные с помощью .die() метод.

а затем прикрепите прослушиватель метода.

таким образом,

$('.arrow').click(function() {
// FUNCTION BODY HERE
}

должно быть:

$('.arrow').die("click")
$('.arrow').click(function() {
// FUNCTION BODY HERE
}

мы должны stopPropagation() во избежание кликов триггеры события слишком много раз.

$(this).find('#cameraImageView').on('click', function(evt) {
   evt.stopPropagation();
   console.log("Camera click event.");
});

Это предотвращает событие от пузырящегося вверх по дереву DOM, предотвращая любые родительские обработчики от уведомления о событии. Этот метод не принимает никаких аргументов.

можно использовать event.isPropagationStopped() чтобы определить, был ли этот метод когда-либо вызван (на этом объекте события).

этот метод работает и для пользовательских событий, запускаемых с помощью trigger ().Учтите, что это не помешает другие обработчики на том же элементе от запуска.

лучшим вариантом будет использовать выкл

<script>
function flash() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function() {
  $( "body" )
    .on("click", "#theone", flash)
    .find("#theone")
      .text("Can Click!");
});
$("#unbind").click(function() {
  $("body")
    .off("click", "#theone", flash)
    .find("#theone")
      .text("Does nothing...");
});
</script>

в моем случае я использовал "делегат", поэтому ни одно из этих решений не сработало. Я считаю, что это была кнопка, появляющаяся несколько раз через вызовы ajax, что вызывало проблему с несколькими щелчками. Решения использовали тайм-аут, поэтому распознается только последний щелчок:

var t;
$('body').delegate( '.mybutton', 'click', function(){
    // clear the timeout
    clearTimeout(t);
    // Delay the actionable script by 500ms
    t = setTimeout( function(){
        // do something here
    },500)
})

$(element).click(function (e)
{
  if(e.timeStamp !== 0) // This will prevent event triggering more then once
   {
      //do your stuff
   }
}

https://jsfiddle.net/0vgchj9n/1/

чтобы убедиться, что событие всегда срабатывает только один раз, вы можете использовать Jquery .один. )( JQuery one гарантирует, что ваш обработчик событий вызывается только один раз. Кроме того, вы можете подписаться на обработчик событий с одним, чтобы разрешить дальнейшие щелчки, когда вы закончите обработку текущей операции щелчка.

<div id="testDiv">
  <button class="testClass">Test Button</button>
</div>

...

var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);};

function clickHandler() {
  //... perform the tasks  
  alert("you clicked the button");
  //... subscribe the click handler again when the processing of current click operation is complete  
  subscribeClickEvent();
}

subscribeClickEvent();

.один только огонь один раз за всю жизнь страницы

Так что в случае, если вы хотите сделать проверку, это не правильное решение, потому что, когда вы не покидаете страницу после проверки, вы никогда не вернетесь. Лучше использовать

$(".bet").on('click',function() 
{ //validation 
   if (validated) { 
      $(".bet").off('click'); //prevent to fire again when we are not yet off the page
      //go somewhere
    }
});

попробуйте так:

<a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>

в моем случае событие onclick запускалось несколько раз, потому что я сделал общий обработчик событий сравнительно как

  `$('div').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
   });`

изменено на

    `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

а также должны сделать отдельные обработчики для статических и динамических кликов, для статической вкладки нажмите

    `$('a[data-toggle="tab"]').on("click",function () {
        console.log("static bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

в моем случае я загрузил то же самое *.js файл на странице дважды в <script> тег, поэтому оба файла прикрепляли обработчики событий к элементу. Я удалил дубликат объявления, и это исправило проблему.

когда я имею дело с этой проблемой, я всегда использую:

$(".bet").unbind("click").bind("click", function (e) {
  // code goes here
}

таким образом, я разматываю и перематываю в один и тот же ход.