OnClick для вызова функции из другого файла JS с помощью реакции
У меня есть следующий html-код в моем компоненте реакции на рендеринг:
<button id = "execute-request-button">Authorize</button>
И я пытаюсь вызвать эту функцию из своего внешнего файла JS
$("#execute-request-button").click(function() {
console.info("CLICK");
handleAuthClick(event);
});
Я также вызываю внешний файл JS в своем HTML. Когда я нажимаю кнопку авторизации, он не выводится на консоль. Также я зашел в консоль в самом первом внешнем файле JS, чтобы узнать, загружен ли он, а нет. Я знаю, что путь к файлу правильный, так как я не получаю никаких ошибок.
Есть предположения?
РЕДАКТИРОВАТЬ
Я переместил свой тег скрипта в начало своего html-файла .<script src = "../src/YoutubeAPI/upload.js"></script>
, и я получаю следующую ошибку: Refused to execute script from 'http://localhost:3000/src/YoutubeAPI/upload.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
<!DOCTYPE html>
<html lang = "en">
<head>
<script src = "../src/YoutubeAPI/upload.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>STEMuli</title>
</head>
<body>
<noscript>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity = "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin = "anonymous"></script>
</noscript>
<div id = "root"></div>
</body>
</html>
Зачем использовать JQuery, если вы можете использовать опору onClick в React? <button id = "execute-request-button" onClick = {this.handleClick}>Authorize</button>
@Tholle Поскольку функция находится в другом чистом файле JS, как мне вызвать внешние функции, тогда в функции handleClick
Например. handleClick = () => { console.info("CLICK"); handleAuthClick(); }
@Tholle, извините за мое незнание ... После того, как я экспортирую функцию handleAuthClick и затем импортирую ее, я получаю ошибки для ajax, говорящие о $' is not defined . Я импортировал ajax в самый первый файл HTML
@The_Enigma Почему ваши теги script находятся внутри тега noscript?
@ hev1, я фактически переместил свой ajax-скрипт за пределы <noscript> (я получил часть этого кода из шаблона Google). Я не могу понять, почему возникает эта ошибка, поскольку из-за этого мой файл JS даже не загружается.
@The_Enigma Прочтите мой ответ. Ваш jQuery не должен находиться в вашем собственном файле Javascript, если он использует jQuery.
@ hev1, мне нужно было идти работать. Надо будет попробовать после работы. Я ценю отзывы и ответы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я думаю, вы добавляете щелчок по событию до того, как ваш код отображает html.
Можешь попробовать:
<button id = "execute-request-button" onclick = "yourEvent()">Authorize</button>
и определите yourEvent - это метод вашего компонента.
Добавьте прослушиватель событий, когда документ будет готов:
$(document).ready(()=> {
$("#execute-request-button").click(function() {
alert()
});
})
Я не вижу ничего плохого в коде. Не забудьте разместить ссылку на jQuery перед в вашем собственном файле Javascript. Если вы поместите его после, методы в вашем собственном файле Javascript будут неопределенными, поскольку он вызывает jQuery.
$("#execute-request-button").click(function() {
console.info("CLICK");
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "execute-request-button">Authorize</button>Я тоже не смог найти ничего плохого, но я думаю, что виновата ошибка, которую я опубликовал в моем отредактированном сообщении. Я просто не могу понять, как это исправить.
Где вы размещаете внешний файл Javascript?