如何将局部参数传递给函数外的事件处理程序？

Question

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

如果事件处理程序在事件发生的 function/scope 之外，那么正确的编写方法是什么？我现在的方式似乎忽略了 "inner" 事件并在调用 "outer" 事件时调用处理程序。

不是每次单击 "Download" 时都附加文本，而是仅在单击 "Generate Report" 时才添加文本。就好像完全忽略了 $("#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>

是否有better/more简化的方式来编写此类事件处理？

Answer 1

您不应在另一个事件处理程序中添加一个事件处理程序，除非您先删除旧的处理程序。每次单击 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>

Answer 2

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

你可以做一件事，而不是使用 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 的点击处理程序中连接 divbutton 的事件，您将附加到它的点击处理程序 - 所以如果您点击 gen-report 两次，您最终会得到 divbutton 的重复处理程序，并且它们都会运行。这就是我将其处理程序移到外面的原因。

编辑

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

// 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() {/**/});
})();

如何将局部参数传递给函数外的事件处理程序？

How to pass local parameters into event handler outside of function?

javascript

jquery

jquery-events