如何将本地参数传递到函数外部的事件处理程序中?

Question

很抱歉一个简单的问题，但我还没有找到对我有帮助的答案。

如果事件处理程序在事件发生的函数/范围之外，那么编写它的正确方法是什么？我现在的方式似乎忽略了"内部"事件，并在调用"外部"事件时调用处理程序。

不是每次单击"下载"时都附加文本，而是仅在单击"生成报告"时添加文本。就像它完全忽略了$("#download").on('click')部分一样。

$('#gen-report').on('click', function() {
$('div').fadeIn();
var example = "var from inside gen-report function"
$('#divbutton').on('click', handler(example));
});
function handler(e) {
$('div').append('<br>report downloaded with ');
$('div').append(e);
}
$('#close').on('click', function() {
$('div').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[set options for report]
<button id="gen-report">
Generate Report
</button>
<div style="display:none; background:pink;">
~generated report~
<button id="divbutton">
Download
</button>
</div>

有没有更好/更简化的方式来编写这种类型的事件处理？

Answer 1

您正在执行handler(example)单击gen-report，而不是连接事件。

您可以做的一件事是，不要使用example变量，而是将内容附加到内部按钮的数据中，或者附加到全局变量或隐藏的 DOM 元素中。例如：

$('#gen-report').on('click', function() {
$('div').fadeIn();
var example = "var from inside gen-report function";
$("#divbutton").data("example", example);
});
$('#divbutton').on('click', function() {
var example = jQuery(this).data("example");
// Go
});

如果在gen-report的单击处理程序中挂接 fordivbutton的事件，则将附加到其单击处理程序 - 因此，如果您单击gen-report两次，最终会得到重复的处理程序divbutton，并且它们都将运行。这就是为什么我要把它的处理程序移到外面。

编辑

如果你改用全局变量：当我说"全局"变量时，我实际上并不是指完全全局的，只是在整个交易的范围内 - 尽可能避免真正的全局变量：

// Don't do:
var example;
$('#gen-report').on('click', function() {/**/});
$('#divbutton').on('click', function() {/**/});
// Do:
(function() {
var example;
$('#gen-report').on('click', function() {/**/});
$('#divbutton').on('click', function() {/**/});
})();

Answer 2

不应在另一个事件处理程序中添加事件处理程序，除非先删除旧处理程序。每次单击Generate Report时，它都会将另一个处理程序添加到Download，然后当您单击Download时，它将多次运行它。

应将example设置为全局变量，并将Download单击处理程序移到外部。然后，您只需要修复它即可在单击时调用handler()函数，而不是立即调用。

var example;
$('#gen-report').on('click', function() {
$('div').fadeIn();
example = "var from inside gen-report function"
});
$('#divbutton').on('click', function() {
if (example) {
handler(example);
} else {
alert("Click on Generate Report first");
}
});
function handler(e) {
$('div').append('<br>report downloaded with ');
$('div').append(e);
}
$('#close').on('click', function() {
$('div').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[set options for report]
<button id="gen-report">
Generate Report
</button>
<div style="display:none; background:pink;">
~generated report~
<button id="divbutton">
Download
</button>
</div>