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

Question

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

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

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

搜索到的术语的值保存在初始搜索按钮单击中，但是对图形的每次修改（及其相应的按钮单击）都不在默认按钮单击之内，而是在默认按钮单击之内，因此它们无权访问的值。搜索字词变量。

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

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

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

Answer 1

您需要在这里进行事件委托 （在事件冒泡链的上方设置事件处理程序的过程，以便它可以拦截所有后代元素触发的事件）。

这是一个例子：

 // 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('');
    ...