按钮单击事件在另一个按钮单击事件中？

Question

我正在使用Chartjs和对第三方数据库的ajax调用进行一些基本的数据绘图。

当用户搜索某个项目并通过单击按钮触发该搜索时，将在新页面上自动生成默认图表。我希望用户能够自定义图表（即将其从一行更改为山峰或时间间隔）。

我已经在html和我的所有ajax调用上创建了所有按钮并对其进行了测试。他们都工作。什么是无用的是搜索词。

搜索词的值保存在初始搜索按钮单击中，但对图表的每次修改（及其相应的按钮点击）都不是默认按钮单击，而是在其外部，因此他们无法访问搜索词变量的值。

我认为嵌套按钮点击是不好的编码练习，但我不确定如何获得搜索词的值。否则。

$('#searchBTN').on('click', function(){
        event.preventDefault();
        // get user input
        var searchTerm = $('#searchInput').val();

        $('#searchInput').val('');

Answer 1

Event Delegation （在事件冒泡链上设置事件处理程序以便拦截所有后代元素触发的事件的过程）就是您需要的。

以下是一个例子：

// Set up the event on a parent element of all the inputs/buttons whatever
// But indicate (via the second argument to the .on() method), what element(s)
// to actually run the callback on
$(document).on('input', "input", function(){
  // No matter which input you actually type in, it's handled with
  // this one event callback, so there is a single point to handle 
  // all of them.
  console.log("You entered: " + $(this).val() + " into " + this.id);        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input id="input3">
<input id="input4">
<input id="input5">

Answer 2

将搜索字词置于事件之外是否可行？然后所有功能都可以访问它。

var searchTerm;
$('#searchBTN').on('click', function(){
        event.preventDefault();
        // get user input
        searchTerm = $('#searchInput').val();

        $('#searchInput').val('');
    ...