在eventhandler中调用Javascript

Question

这一定是我对基本内容的一些误解，我知道javascript调用已被多次解释过。但我无法理解这个问题。 我在页面中有以下按钮 -

<button id="test" class="clickClass">Click Me</button>

为什么在页面加载时会立即执行以下事件处理程序？

$(document).ready(
function(){
//Shows on document load
$('.clickClass').on('click',testClick.call(this))
})

但是，如果我将.call包装在另一个函数中，它将按预期执行（仅当我单击按钮时） -

$(document).ready(
function(){
//Shows only when the button is clicked
$('.clickClass').on('click',function(){testClick.call(this)})
})

非常感谢任何帮助。 如果我需要对此问题进行更多解释，请告诉我。

Answer 1

问题是因为call()立即调用该函数并将结果分配给click处理程序。

相反，你应该只通过引用提供函数，然后默认情况下this将是被点击的元素。

$(document).ready(function() {
  $('.clickClass').on('click', testClick)
})

function testClick() {
  console.log(this.id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickClass" id="foo">Click me</div>