Javascript 作为单击处理程序附加的函数在单击之前被调用

因此，我有一个简单的应用程序，它使用本地数据结构在折线图中动态绘制变量。变量名称及其相应的颜色显示在折线图下方的图例中。都很标准

我正在尝试添加功能，用户可以通过单击图例中某个变量的名称，从折线图中删除该变量。我尝试通过使用jQuery附加一个单击处理程序来实现这一点，如下所示：

$('.legendItem').click(removeVariable);

但是，为了从基础数据结构中删除变量，

removeVariable（）

需要变量名。我将其存储在

.legendItem

span中的

data

属性中。通过这种方式，我可以使用

$（'.legendItem'）.data（'keyword'）

访问属性，因为可以有许多不同的

.legendItem

元素，我希望为每个单击的元素动态地将数据关键字属性传递给removeVariable（）函数

但是，当我尝试将此数据传递添加到单击处理程序时，我遇到了问题。当我将“关键字”作为参数添加到

removevaluate（）

并包括：

$('.legendItem').click(removeVariable($(this).data('keyword')));

---

当我在Chrome JS调试器中调试时，removeVariable（）函数由第二个示例调用，而不是第一个示例。由于单击处理程序依赖于在此脚本阶段不存在的数据，因此会导致错误。是否存在我忽略的任何明显错误或执行此类动态操作的更好方法？

您正在执行

removevaluate

函数，而不是向其传递引用。您可以通过使用匿名函数来避免这种情况：

$('.legendItem').click(function() {
    removeVariable($(this).data('keyword'));
});

---

您正在执行

removevaluate

函数，而不是向其传递引用。您可以通过使用匿名函数来避免这种情况：

$('.legendItem').click(function() {
    removeVariable($(this).data('keyword'));
});

---

函数引用后的括号立即调用该函数引用。函数引用后的括号立即调用该函数引用。