单击时调用自定义函数（javascript / jquery）

Question

我是初学者，在调用我在 JavaScript 或 jQuery 上创建的函数时遇到问题。

如果我使用它，它可以工作：

$("#objectId").click(function(){
    alert("Clicked on objectId")
}

但是，如果我预定义一个函数并在单击时调用它，它就不起作用

function alertOnClick(objectToClick) {
    alert("Clicked on " + objectToClick)
}
$("#objectId").click(alertOnClick("objectId"))

在这种情况下，它会在页面加载时发出警报，而不是在点击时发出警报。

我在语法方面做错了什么，为什么？

非常感谢

Answer 1

因为您调用的是函数 alertOnClick 而不是将其作为引用传递

你应该这样做：

$("#objectId").click(alertOnClick)

function alertOnClick(ev) {
    alert("Clicked on " + ev.target.id);
}

当您执行$("#objectId").click(alertOnClick("objectId")) 时，您是在单击事件发生之前以objectId 作为参数调用alertOnClick 方法。您应该做的是传递方法的引用，以便在 click 事件发生时调用它。

Answer 2

为此，您需要从alertOnClick 返回一个函数，如图所示：

function alertOnClick(objectToClick) {
  return function() {
    alert("Clicked on " + objectToClick)
  }
}

这将允许您执行以下操作：

$("#objectId").click(alertOnClick("objectId"))

这是一个工作代码示例，可以查看它的实际效果：

function alertOnClick(objectToClick) {
  return function() {
    alert("Clicked on " + objectToClick)
  }
}

$("#objectId").click(alertOnClick("objectId"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<button id="objectId">Object Id</button>