Question

我有一个动态HTML元素，我想将一个函数附加到事件处理程序。

drilldownTextInput = $("<input type='text' class='drilldown-search' data-drilldown-options='" + drilldownOptions + "' />");
drilldownTextInput.on('click', showOptions());

function showOptions() {
    console.log("Working.");
}

问题在于，在页面加载时，showOptions()函数会立即被称为，而不是点击事件。

如果我这样做，事件将按预期工作 - 仅在点击时。

drilldownTextInput = $("<input type='text' class='drilldown-search' data-drilldown-options='" + drilldownOptions + "' />");
drilldownTextInput.on('click', function() {
    console.log("Only appears on click...");
});

两者有什么区别？如何调用函数以保持DRY？

Answer 1

()调用一个函数，你应该只传递函数而不执行它，否则函数的返回值被设置为处理函数。

drilldownTextInput.on('click', showOptions);

Answer 2

尝试以下方法：

drilldownTextInput.on('click', showOptions);

而不是：

drilldownTextInput.on('click', showOptions());

Reference

立即将函数调用附加到事件附件调用方法

2 个答案: