时间戳

首页 > 解决方案 > click(jquery) 在脚本加载后立即执行该函数并且不响应点击

javascript - click(jquery) 在脚本加载后立即执行该函数并且不响应点击

问题描述

我试图在.click按下按钮时使用（jquery 3.4.1）执行一个函数，但该函数在页面加载后立即执行。经过一番尝试后，我认为可能有一些代码使其行为如此，所以我创建了具有基本元素的新文件并尝试使用它，但它仍然无法正常工作。我认为我可能做错了什么，所以我检查了一个教程，但它没有帮助，因为我正在做同样的事情。我也试过.on('click', function)，但结果是一样的。

.html 文件

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1 style="text-align: center;">Some Text</h1>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </body>
</html>

.js 文件

$('h1').click(console.log('Clicked'))

知道为什么它不起作用吗？

标签： javascriptjqueryhtml

解决方案

您正在将单击事件侦听器附加到 h1

$('h1').click(console.log('Clicked'))

它的作用是执行控制台并将其返回的内容分配给事件侦听器。所以这就是它不起作用的原因。您基本上只是执行了以下操作，因为控制台不返回任何内容。

$('h1').click(undefined)

所以你必须给它分配一个功能

$('h1').click(function () { console.log('Clicked') }) 


// Your original way written out to see what is happening
// $('h1').click(console.log('Clicked')) // code below is same thing as this line 
var cl = console.log("Clicked Original Way") // will log message
console.log('cl is:', cl) // cl is: undefined
$('h1').click(cl) // aka $('h1').click(undefined)

// solution 1
$('h1').click(function() {
  console.log('Clicked')
})

// solution 2
function myClickFunction() {
  console.log('Clicked w/ function')
}
$('h1').click(myClickFunction)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="text-align: center;">Some Text</h1>

推荐阅读