Событие click () вызывается дважды в jquery

113

Я настраиваю элемент ссылки и вызываю его событие щелчка в jquery, но событие щелчка вызывается дважды, см. Ниже код jquery.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Пожалуйста, порекомендуйте.

Спасибо.

домлао
источник
2
Проблема, вероятно, в другом месте вашего скрипта.
karim79
3
если вы не можете найти, где вы сделали вещи, чтобы вызвать это дважды, отмените привязку ('clik') перед щелчком (...).
regilero
regilero: собственно, вся кодовая база очень большая. куда мне положить эту развязку?
domlao
2
вы можете определить, какие функции связаны с этим событием щелчка: stackoverflow.com/questions/570960/…
Anh Pham

Ответы:

229

Убедитесь, что вы случайно не включили свой скрипт дважды в свою HTML-страницу.

Скотт
источник
1
Это было проблемой в моем случае. То, что мое событие щелчка вспыхивало. Спасибо за указатель. :) +1
Тахир Акрам
22
Я просто посмотрел на это решение и засмеялся, подумав: «Я недостаточно глуп, чтобы сделать это» ... Оказывается, я сделал именно это. Большое спасибо.
JazzyP
1
Спасибо! Это оказалось проблемой и для меня. Имел его в шаблоне лезвия laravel и во вложенном шаблоне, который называл @parent с тем же именем раздела. К сожалению. Еще раз спасибо!
Филлип Харрингтон,
1
Спасибо за этот совет. Боролся с этим более 20 часов, и этот совет привел меня на правильный путь. Я использовал MVC ScriptBundles, но также связывал файлы сценариев напрямую, и это дублировало события
Маниш
lol ... Я был там ... Я возложил вину на третью сторону, но это я дважды связал файл .js.
Джулиан
76

Отменить привязку перед кликом;

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});
Система
источник
1
попробуйте $ ("# link_button"). unbind (); или сделайте простой тест, чтобы проверить, сколько раз этот код читается, если более одного раза ...
TheSystem
3
это просто исправление ошибки каждый раз на лету, а не реальное решение. он делает свое дело и помог мне, но вы должны найти настоящую проблему и исправить ее навсегда.
Хуан Игнасио,
1
это действительно полезно в моем случае, потому что мне нужно несколько раз вызывать методы с моими событиями после того, как некоторые вызовы ajax начинают чрезмерно щелкать (я не знаю, существует ли это слово). Для моей ситуации это означает решение.
Thiago C. S Ventura
Исправлена ​​моя проблема со сценарием, который был включен только один раз. Спасибо!
К. Рода,
49

Это означает, что ваш код дважды включал скрипт jquery. Но попробуйте это:

$("#btn").unbind("click").click(function(){

//your code

});
Налан Мадхесваран
источник
36

Я попробовал, e.stopImmediatePropagation(); Мне кажется, это работает.

Aps18
источник
@ BasheerAL-MOMANI См stackoverflow.com/questions/5299740/...
Fangxing
Спасибо, это работает ... кстати, после прочтения поймите, что это предотвращает выполнение любых родительских обработчиков
Нандлал Ушир
18

В моем случае я использовал приведенный ниже сценарий для решения проблемы.

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

off()развязывает все события, к которым привязаны #id. Если вы хотите отвязать только clickсобытие, используйте off('click').

Upendra
источник
8

Просто вызовите .off () прямо перед вызовом .on ().

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

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

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

$(element).off('click').on('click', function() {
// function body
});
Шринивас
источник
7

Довольно распространенное решение проблемы с двумя щелчками мыши - это установка

e.stopPropagation()

в конце вашей функции (при условии, что вы ее используете function(e)). Это предотвращает всплытие события, которое может привести ко второму выполнению функции.

демонголем
источник
6

У меня была такая же проблема, но вы можете попробовать изменить этот код

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

к этому:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Для меня этот код решил проблему. Но будьте осторожны, чтобы случайно не включить ваш скрипт дважды на вашу HTML-страницу. Я думаю, что если вы делаете эти две вещи правильно, ваш код будет работать правильно. Спасибо

Эллингтон Брамбила
источник
3

пожалуйста, попробуйте это

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});
Радж
источник
Я изменил "жить" на "включено", и, похоже, у меня это работает. Таким образом, событие запускается только на время, когда нажимается кнопка.
Викнешвар
Это место.
LargeTuna
3

Это определенно ошибка, особенно когда это FireFox. Я много искал, пробовал все приведенные выше ответы и, наконец, получил это как ошибку от многих экспертов по SO. Итак, я наконец-то пришел к этой идее, объявив переменную типа

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

Таким образом, он сначала проверяет, была ли функция ранее вызвана или нет.

Воздушный
источник
3

Добавление e.preventDefault();в начале моей функции сработало для меня.

Крис Эдвардс
источник
3

Это старый вопрос, но если вы используете делегирование событий, это у меня вызвало его именно это.

После удаления .delegate-twoперестал выполняться дважды. Я считаю, что это происходит, если оба делегата присутствуют на одной странице.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});
Вечный час
источник
2

этот фрагмент кода не содержит ничего плохого. Это еще одна часть вашего сценария, как сказал @karim

генезис
источник
2

В моем случае он отлично работал в Chrome, и IE .click()дважды вызывал . если это была ваша проблема, я исправил ее, вернув false после вызова .click()события

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });
Себастьян Кастальди
источник
2

Звонок unbindрешил мою проблему:

$("#btn").unbind("click").click(function() {
    // your code
});
Дипти Гелот
источник
2

Я не уверен, почему, но у меня была проблема с

$(document).on("click", ".my-element", function (e) { });

Когда я изменил его на

$(".my-element").click(function () { });

Проблема решена. Но в моем коде определенно что-то не так.

Петр
источник
это сработало для меня в laravel, не знаю, в чем причина этой проблемы
Хан Фарман
1

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

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();
Мартин
источник
1

У меня тоже была эта проблема с FF. Однако мой тег был привязан к <a>тегу. Хотя <a>тег никуда не делся, он все равно дважды щелкнул. Вместо этого я заменил <a>тег на <span>тег, и проблема с двойным щелчком исчезла.

Другой вариант - полностью удалить атрибут href, если ссылка никуда не денется.

Садики Латти
источник
Это не совсем ответ на вопрос. Если у вас есть другой вопрос, вы можете задать его, нажав « Задать вопрос» . Вы также можете добавить награду, чтобы привлечь больше внимания к этому вопросу, когда у вас будет достаточно репутации .
Шон Патрик Флойд,
@SeanPatrickFloyd: Собственно, это ответ. Даже если они сформулированы, чтобы поднять красные флажки.
Дедупликатор
1

Я столкнулся с этой проблемой, потому что мой $(elem).click(function(){});скрипт был встроен в div, для которого было установлено значение style="display:none;".

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

NRTRX
источник
1

Когда я использую этот метод на странице загрузки с помощью jquery, я пишу $('#obj').off('click');перед установкой функции щелчка, чтобы пузырь не появлялся. Работает для меня.

ГуставоАдольфо
источник
1

Мой простой ответ заключался в том, чтобы превратить привязку клика в функцию и вызвать ее из onclick элемента - сработало удовольствие! тогда как ничего из вышеперечисленного не

Стив Уитби
источник
0

Если ваше мероприятие звонит дважды, три или больше, это может помочь.

Если вы используете что-то подобное для запуска событий…

$('.js-someclass').click();

… Затем обратите внимание на количество .js-someclassэлементов на странице, потому что это вызовет событие щелчка для всех элементов, а не только один раз!

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

$('.js-someclass:first').click();
Фабьен Снауверт
источник
0

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

У меня была аналогичная проблема, и чтобы убедиться в этом, я просто добавил console.logкоманду в свой сценарий, как в следующем фрагменте:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Если при нажатии кнопки вы получаете что-то похожее на изображение ниже из консоли разработчика вашего браузера (как это сделал я), то вы точно знаете, что click()событие было дважды привязано к одной и той же кнопке.

консоль разработчика

Если вам нужен быстрый патч, решение, предложенное другими комментаторами использования offметода (кстати unbind, устарело с jQuery 3.0), чтобы отвязать событие перед (повторной) привязкой, оно работает хорошо, и я тоже рекомендую его:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

К сожалению, это временный патч! Как только проблема осчастливления вашего босса будет решена, вам действительно стоит еще немного углубиться в свой код и исправить проблему «дублированной привязки».

Фактическое решение, конечно же, зависит от вашего конкретного варианта использования. В моем случае, например, возникла проблема «контекста». Моя функция вызывалась в результате вызова Ajax, примененного к определенной части документа: перезагрузка всего документа фактически перезагружала контексты «страницы» и «элемента», в результате чего событие было дважды привязано к элементу .

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

Сэл Боррелли
источник
-1

Была такая же проблема. Это сработало для меня -

$('selector').once().click(function() {});

Надеюсь, это кому-то поможет.

SGhosh
источник
Выдает ошибку для меня ... Плюс это грязное решение - функция запускается более одного раза, решение состоит в том, чтобы поместить ее в другое место и использовать console.log () для наблюдения за происходящим.
Тайлерл
-1

В моем случае HTML был выложен так:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

И мой jQuery был таким:

jQuery('.share').toggle();

Это смутило меня, потому что ничего не происходило. Проблема заключалась в том, что внутренний .shares toggle отменял внешний .shares toggle.

Стивен Линн
источник
-1

Я решил эту проблему, изменив тип элемента. вместо кнопки помещаю ввод, и эта проблема больше не возникает.

помимо:

<button onclick="doSomthing()">click me</button>

заменить:

<input onclick="doSomthing()" value="click me">
Шнеор
источник