jquery click событие срабатывает несколько раз при использовании селектора класса - PullRequest
Новая
       14

jquery click событие срабатывает несколько раз при использовании селектора класса

27 голосов
/ 08 января 2010

вот мой HTML 

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

Я создал привязку события jquery с этим кодом: 

    jQuery(".myLink").click(function(event) {

         var myId = this.id;

         location.href = '/x/y?myId=' + myID;
   });

когда я нажимаю на одну из ссылок (элементы li). я думал, что это вызовет одно событие щелчка, и когда я вызову this.id, я просто получу этот идентификатор элемента, на который я нажал.

Но вместо этого это выглядит так: 

   jQuery(".myLink").click(function(event) {

стреляет снова и снова, даже подумав, что я просто нажал на одну ссылку. Я поместил отладочную инструкцию в их и использовал firebug и увидел, что это вызывается снова и снова.

Есть идеи, что происходит?

Ответы [ 9 ]

69 голосов
/ 18 ноября 2010

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

$ ('. remove_lkc'). unbind ('click'). click (function () {..........

18 голосов
/ 08 января 2010

Если вы закроете теги <li>, вы исправите проблему. Я только что проверил это, и это исправляет. Должно быть 

<li> ... </li>
<li> ... </li>

не 

<li>
<li>
14 голосов
/ 22 марта 2012

В моем случае у меня было несколько вкладок, отображающих один и тот же фрагмент, и каждый фрагмент имел вызов $ (document) .ready (), который трижды связывал событие click.

9 голосов
/ 15 декабря 2011

Добавление этих двух строк решило это для меня: 

event.stopPropagation();
event.preventDefault();

Источник: http://code.google.com/intl/en/mobile/articles/fast_buttons.html

6 голосов
/ 02 апреля 2011

Моя проблема заключалась в том, что у меня была привязка события в цикле, когда я создавал <div> s, таким образом добавляя событие снова и снова для каждого элемента в событии. Это просто что-то, чтобы перепроверить.

6 голосов
/ 08 января 2010

Попробуйте поместить значение атрибута id в кавычки. Странные вещи случаются, когда вы просто ставите id=1.

Кроме того, откуда вы знаете, что она стреляет несколько раз? Поместите эту строку вверху функции и посмотрите журнал Firebug, чтобы увидеть, что происходит: 

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );

редактирование:

Хех, как уже отмечали другие ... Убедитесь, что ваша разметка тоже действительна: P

4 голосов
/ 06 декабря 2014

В моем случае javascript должен отображаться вместе с запросом ajax. 

$(document).ready(function(){
    $(document).on('click','.className',function(){alert('hello..')})
});

Событие сработало несколько раз .. использовало .off () , чтобы удалить все предыдущие обработчики событий. (используйте ту же подпись, что и в .on ()) 

$(document).ready(function(){
    $(document).off('click','.className');
    $(document).on('click','.className',function(){alert('hello..')});
});

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

1 голос
/ 02 сентября 2013

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

1 голос
/ 08 января 2010

Из опубликованного HTML-кода выглядит, как будто DIV-файлы myLink являются вложенными, вызывая запуск события несколько раз, когда каждый DIV получает щелчок. Как уже было отмечено, убедитесь, что теги правильно сформированы. Должны ли теги DIV в конце каждой строки закрывать теги?

...