另一个按钮单击事件中的按钮单击事件？答案

【问题标题】：Button click event inside another button click event?另一个按钮单击事件中的按钮单击事件？
【发布时间】：2018-03-09 03:47:07
【问题描述】：

我正在使用 Chartjs 结合对第三方数据库的 ajax 调用来绘制一些基本的数据图表。

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

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

搜索到的词的值保存在最初的搜索按钮点击中，但是对图表的每次修改（以及它们对应的按钮点击）都不是在默认按钮点击的内部，而是在它之外，所以他们无权访问搜索词变量的值。

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

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

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

【问题讨论】：

遵循这将帮助您在这里获得答案（并且通常会导致您自己找到答案:) stackoverflow.com/help/mcve
我认为你应该研究一下事件委托。
确保将您的源代码包含为文本。

标签： javascript jquery

【解决方案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">

【讨论】：

@J.G.Sable 不客气。不要忘记也为答案投票。祝你好运。
所以我会使用它，获取点击的 btn 的 ID，然后使用巨大的 switch 语句来执行 ajax 调用以匹配 ID？
@J.G.Sable 完全正确。我更新了答案只是为了表明获得唯一的id 非常简单。
是的，我让它在我的身上工作并绘制所有不同的间隔。只是几个问题，但我认为它与chartjs有关。也许不是。还有更多工作要做。

【解决方案2】：

是否可以将您的搜索词放在事件之外，作为一个全局词？然后所有功能都可以访问它。

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

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

【讨论】：