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

Question

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

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

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

但是,为了从基础数据结构中删除变量,removeVariable()需要变量名称.我将它存储data在.legendItemspan 中的属性中.这样,我可以访问属性$('.legendItem').data('keyword')因为可以有许多不同的.legendItem元素,我希望动态地将data-keyword属性传递给每个被点击元素的removeVariable()函数.

但是,当我尝试将此数据传递添加到单击处理程序时,我遇到了麻烦.当我将'keyword'作为参数添加到removeVariable()并包括:

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

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

Answer 1

您正在执行该removeVariable函数,而不是传递对它的引用.您可以通过使用匿名函数来避免这种情况:

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