Question

我的render react组件中包含以下html代码：

<button id="execute-request-button">Authorize</button>

我正在尝试从外部JS文件中调用此函数

$("#execute-request-button").click(function() {
    console.log("CLICK");

    handleAuthClick(event);
});

我也在HTML中调用外部JS文件。单击授权按钮时，它不会打印到控制台。另外，我在外部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>

Answer 1

我认为您在代码呈现html之前添加了事件点击。

您可以尝试：

<button id="execute-request-button" onclick="yourEvent()">Authorize</button>

并定义yourEvent是您组件的方法。

Answer 2

在文档准备好后添加事件监听器：

$(document).ready(()=> {
       $("#execute-request-button").click(function() {
        alert()
      });
})

示例：https://jsfiddle.net/n5u2wwjg/90476/

Answer 3

我认为代码没有错。请记住在您自己的Javascript文件之前之前放置对jQuery的引用。如果将其放在后面，则您自己的Javascript文件中的方法将因为调用jQuery而未定义。

$("#execute-request-button").click(function() {
    console.log("CLICK");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="execute-request-button">Authorize</button>

onClick从另一个JS文件中调用带有React的函数

3 个答案: