Почему событие onClick запускается дважды?

У меня есть следующий HTML:

<span onclick="alert('Boem')">
    <button id="test1">test</button>
</span>

Когда я вызываю следующий код JavaScript:

$('#test1').trigger('click');

Событие onclick запускается дважды, хотя я ожидаю, что оно будет запущено только один раз. Потому что JQuery должен посмотреть в дереве DOM и найти только один щелчок.

У меня нет контроля над пролетом, он генерируется сторонним инструментом. У меня есть контроль над кнопкой и ее параметрами.

Вы можете найти пример JSFiddle здесь: http://jsfiddle.net/Voga/v4100zke/

Обновление

Я не знаю содержания слушателя onclick в span. Это также генерируется сторонним инструментом. Я хочу, чтобы триггер клика выполнял этот клик, как сейчас, но только один раз.

Ответ 1

Он вызывается дважды, потому что кнопка находится внутри диапазона, а диапазон имеет onclick="alert('Boem')", поэтому при нажатии кнопки на кнопке появляется предупреждение, и одно и то же событие нажатия распространяется на диапазон и показывает предупреждение еще раз.

вам нужно остановить поведение кнопки по умолчанию, используя код ниже:

$(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

Демо

Ответ 2

чтобы остановить распространение событий, используйте: stopPropagation

$( "#test1" ).on( "click", function(ev) {
    ev.stopPropagation();
});
$('#test1').trigger('click');

Обращаем ваше внимание, что в порядке событий назначаются в DOM.

DEMO

Ответ 3

Bubbling. Событие click для дочернего объекта также происходит на родительском (span).

Ответ 4

Этот поток поможет ответить "почему".

Лучше всего было бы просто назначить обработчик клика элементу, чтобы ваш JavaScript был абстрагирован от HTML:

http://jsfiddle.net/v4100zke/3/

$('#test1').click(function() {
    alert('Boem')
});

Надеюсь, что это поможет.

Ответ 5

Здесь button click is triggered. Поскольку button находится внутри событий span и onclick, для span определено событие two alert.

One is by the button

other by its parent (родитель имеет событие onclick и нажатие кнопки).

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

<span>
    <button onclick="alert('Boem')" id="test1">test</button>
</span>

Ответ 6

Это также должно работать:

$($('#test1').parent()).trigger('click');

Ответ 7

У меня была та же проблема. Мой был тем фактом, что я использовал .trigger('.element'), и было два элемента с этим классом element.

Итак, я получил более конкретную информацию и использовал .trigger('.parent .element') для обеспечения только одного события щелчка на одном элементе вместо одного события click на двух элементах.

Ответ 8

Обратите внимание, что вы использовали метод щелчка jQuery, он будет генерировать событие dom mouse click и событие jquery click. Затем оба элемента jquery click Event и dom click распространяются на элемент span, а его прослушиватель onclick запускается дважды, поэтому дважды появляется предупреждение

проверьте эту демонстрацию чтобы понять это

как справиться с этим, просто используйте stopPropagation как ответы выше

$('#test1').click(function() {

  // comment this line and run, 'parent' will be alerted TWICE!!! since both mouseEvent and jQuery.Event trigger the onclick listener
  $('#children').click(function(e) {e.stopPropagation()})

});

Ответ 9

Я тоже сталкиваюсь с этой проблемой на модале

Решаем следующие трюки -

$('#saveButton').off('click').on('click', { modal: modal }, save)

Отсюда off('click') предотвращает многократное срабатывание метода сохранения.

Ответ 10

Я также получил аналогичную проблему, где я должен был скачать PDF, который загружался дважды. Я использовал метод jQuery stopImmediatePropagation.

$( "#test1" ).on("click", function(e) {
     e.stopImmediatePropagation();
});

$('#test1').trigger('click');

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

Ответ 11

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

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

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

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

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