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

вот мой 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 и увидел, что это вызывает вызов снова и снова.

Любые идеи о том, что происходит?

Ответ 1

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

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

не

<li>
<li>

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

изменить:

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

Ответ 6

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

Ответ 7

В моем случае 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..')});
});

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

Ответ 8

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

Ответ 9

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