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

Question

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

我正在尝试添加一些功能，用户可以通过单击图例中的变量名称从折线图中删除单个变量。我尝试通过使用jQuery附加单击处理程序来执行此操作，如下所示：

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

但是，为了从基础数据结构中删除变量，removeVariable()需要变量名称。我将其存储在data范围内的.legendItem属性中。这样，我可以使用$('.legendItem').data('keyword')访问该属性因为可以有许多不同的.legendItem元素，所以我希望将data-keyword属性动态传递给每个单击元素的removeVariable（）函数。

但是当我尝试将此数据传递添加到Click处理程序时，我遇到了麻烦。当我将'keyword'作为参数添加到removeVariable()并包含：

时

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

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

Answer 1

您正在执行removeVariable函数，而不是传递对它的引用。您可以使用匿名函数来避免这种情况：

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