JavaScript调用无括号的函数

Question

几周前，我很痛苦地能够将按钮动态添加到具有自己的.on（'click'..处理函数的HTML DOM对象中，并使用e.stopPropgation阻止这些新的子元素触发事件。

我做的奇怪的事情是调用没有括号的函数。 我不知道为什么这样做或为什么有效，或者在附加括号后为什么无效。 我想知道我是不是在偶然地做某事而不是设计（现在我将在其中添加评论）。

它是这样的：

//Container is the parent element
// var buttons stores the buttons with class 'buttons'
$('.container').on('click', function(){
    $(buttons).appendTo($(this)).fadeIn(500).find('.buttons').click(tableButton);
});

function tableButton(e){
    e.stopPropagation();
    //do stuff

}

我不知道为什么我没有争执地写了对tableButton的调用，或者为什么它运行良好。 我试图将语法更改为

.find('.buttons').on('click', function(e){
  tableButton(e);
});

但随后它不再起作用。

任何帮助表示赞赏！

Answer 1

之所以有效，是因为您将函数传递给了点击处理程序，而不是自己调用（（））函数，例如：

var testFunction = function(msg) {
    alert(msg);
}

var functionCaller = function(functionToCall) {
    functionToCall('hello!');
}

functionCaller(testFunction);

functionCaller将消息参数传递给testFunction（），但是我们仅将testFunction传递给functionCaller（不带参数）

对于不起作用的部分，函数名不是tableButton（）而不是tableButtons（）吗？

参见http://jsfiddle.net/g2PAn/

Answer 2

您实际上并没有调用它，只是声明它和它接受的参数。 确实使用参数调用了click回调，但是您没有。

该问题可能来自于jQuery的调用你的函数与点击的元素绑定为一个事实this ，你可以调用表按钮是这样的：

.find('.buttons').on('click', function(e){
     tableButton.call(this, e);
});