Подія jQuery Button.click () запускається двічі

У мене така проблема з цим кодом:

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

Якщо я натисну цю кнопку, сповіщення з’явиться два рази. Справа не тільки в цій конкретній кнопці, але і в кожній кнопці, яку я створюю.

Що я роблю не так?

Ваш поточний код працює, ви можете спробувати тут: http://jsfiddle.net/s4UyH/

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

У цьому випадку ми можемо зробити наступне

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

Я мав подію запускатися два рази спочатку, коли сторінка оновлювалася, вона запускалася чотири рази. Це пройшло через багато безрезультатних годин, перш ніж я зрозумів це за допомогою пошуку в Google.

Потрібно також сказати, що код спочатку працював, поки я не почав користуватися віджетом гармошки JQueryUI.

Дивна поведінка, яку я також переживав. Тож для мене "повернення помилкового" зробило свою справу.

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });

Якщо ви використовуєте

$( document ).ready({ })

або

$(function() { });

кілька разів функція клацання спрацьовує стільки разів, скільки використовується.

Ви можете спробувати це.

    $('#id').off().on('click', function() {
        // function body
    });
    $('.class').off().on('click', function() {
        // function body
    });

Це також може бути викликано наявністю як елемента , так inputі label всередині елемента із засобом прослуховування кліків.

Ви натискаєте на label, що викликає подію клацання, а також іншу подію клацання на inputдля label. Обидві події спливають на ваш елемент.

Дивіться цю ручку вигадливого перемикача лише для CSS: https://codepen.io/stepanh/pen/WaYzzO

Примітка: Це не стосується jQuery, власний прослуховувач запускається вдвічі, як показано на пера.

Це може бути спричинено з таких причин:

1. Ви не раз включали сценарій в один і той же файл html
2. Ви двічі додавали прослуховувач подій (наприклад: usingonclick атрибута елемента, а також за допомогою jquery
3. Подія продувають до деякого батьківського елемента. (Ви можете розглянути можливість використанняevent.stopPropagation ).
4. Якщо ви використовуєте template inheritanceлайкextends в Django, швидше за все , ви включили сценарій в більш ніж один файл , які в поєднанні один з одним includeабоextend теги шаблонів
5. Якщо ви використовуєте Django шаблон, ви неправильно розмістили blockвсередині іншого .

Отже, вам слід або виявити їх, і видалити копію імпорту. Це найкраще, що потрібно зробити.

Іншим рішенням є видалення всіх clickпрослуховувачів подій у сценарії, наприклад:

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

Ви можете пропустити, event.stopPropagation();якщо ви впевнені, що подія не відображається.

У мене була та сама проблема, і я спробував все, але це не спрацювало. Тому я використав наступний фокус:

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

Ви перевіряєте, чи не є цей параметр нульовим, ніж код. Отже, коли функція спрацює вдруге, вона покаже, що ви хочете.

$("#id").off().on("click", function() {

});

Працював у мене.

$("#id").off().on("click", function() {

});

Я виявив, що прив'язка елемента. Клацніть у функції, яка трапляється більше одного разу, поставить її в чергу, тому наступного разу, коли ви її клацнете, вона спрацює стільки разів, скільки було виконано функції прив'язки. Помилка новачка, можливо, на моєму кінці, але, сподіваюся, це допоможе. TL, DR: переконайтеся, що ви прив’язали всі кліки функції налаштування, яка відбувається лише один раз.

Подібно до того, що Нік намагається сказати, подія ззовні викликає подію двічі. Щоб вирішити цю проблему, слід використовувати event.stopPropagation (), щоб батьківський елемент не міг.

$('button').click(function(event) {
    event.stopPropagation();
});

Сподіваюся, це допоможе.

у моєму випадку я використовував команду зміни таким чином

$(document).on('change', '.select-brand', function () {...my codes...});

а потім я змінив шлях до

$ ('. select-brand'). on ('change', function () {... мої коди ...});

і це вирішило мою проблему.

Якщо ви не хочете, щоб ваша кнопка була кнопкою надсилання, закодуйте її як Видалити елементи, які повинні вирішити вашу проблему. Якщо ви не вказали тип для елемента кнопки, за замовчуванням це буде кнопка надсилання, що призведе до виявленої вами проблеми.

Пов’язана зі Відповіддю Степана.

у моєму випадку у мене є і те, inputі інше labelу моєму .click()слухачі.

я просто замінив labelна div, це спрацювало!

Якщо ви використовуєте AngularJS:

Якщо ви використовуєте AngularJS, а ваша подія натискання jQuery знаходиться ВНУТРІ КОНТРОЛЕРА , це буде порушено самим фреймворком Angular і запускатиметься двічі. Щоб вирішити цю проблему, перемістіть її з контролера та виконайте наступне:

// Make sure you're using $(document), or else it won't fire.
$(document).on("click", "#myTemplateId #myButtonId", function () {
   console.log("#myButtonId is fired!");
   // Do something else.
});

angular.module("myModuleName")
   .controller("myController", bla bla bla)