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
});

如果您在divbutton的点击处理程序中挂钩gen-report的事件，则会附加到其点击处理程序 - 因此，如果您点击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()函数，而不是直接调用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: