JSFiddle не управляет событиями нажатия внутри функции - PullRequest
Новая
       18

JSFiddle не управляет событиями нажатия внутри функции

2 голосов
/ 27 марта 2019

У меня очень простой JSFiddle

HTML 

<input type="button" value="Submit" id="myBtn" onclick="foo()">

JS 

function foo(){
    console.log('click');

  $("#myBtn").click(function(event) {
    console.log('click2');
  });

    console.log('click3');

}

Вот ссылка: https://jsfiddle.net/mdvyo481/

Я уже загрузил скрипт в режиме Без переноса - Голова .Как ни странно, когда я нажимаю на кнопку, click и click3 печатаются в консоли, но click2 не печатается.Если я нажму на него еще раз, я получу 2 отпечатка click2.

Похоже, что event неправильно управляется на скрипке.Есть ли способ исправить?

Ответы [ 2 ]

2 голосов
/ 27 марта 2019

Это правильное поведение.Это происходит потому, что вы связываете событие click при вызове функции foo.Первый раз, когда вы звоните foo, вы связываете событие, второй раз, когда вы связываете его снова и так далее.Привязка события не удаляет предыдущую привязку, поэтому, если вы нажмете submit 10 раз, вы свяжете 10 различных обработчиков событий click, все из которых сделают то же самое, и вы получите click2 в консоли 10 раз.

1 голос
/ 27 марта 2019

Либо добавьте обработчик нажатия на кнопку с помощью jquery, либо с помощью атрибута onclick, но не обоих.

Я привел два примера, чтобы проиллюстрировать это: 

function foo(element) {
  console.log(element.id + ' was clicked <- onclick attribute handler')
}


$("#myBtn").click(function(event) {
  console.log(event.target.id + ' was  clicked, <- jQuery handler')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

Причина, по которой ваш пример не работает, заключается в том, что вы устанавливаете обработчик щелчков jquery только после вызова foo(), поэтому он также не сработает.

...