Button click event inside another button click event?

Question

I'm doing some basic graphing of data using Chartjs combined with an ajax call to a third-party database.

When the user searches for an item and triggers that search by a button click, a default graph is automatically generated on the new page. I'd like the user to be able to customize the graph (i.e. change it from a line to a mountain or the time interval).

I've created all my buttons on the html and all my ajax calls and tested them. They all work. What is not working is the search term.

The value of the term searched is saved in the initial search button click, but each modification to the graph (and their corresponding button clicks) are not INSIDE the default button click, but outside it, so they do not have access to the value of the search term variable.

I thought it was bad coding practice to have nested button clicks, but I'm not sure how I'd get the value of the search term otherwise.

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

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

Following this will help you get an answer here (and often leads to you finding the answer yourself :) stackoverflow.com/help/mcve — KayakinKoder
– KayakinKoder, Commented Mar 8, 2018 at 19:02

Scott Marcus · Accepted Answer · 2018-03-08 19:47:07Z

1

Event Delegation (the process of setting up an event handler higher up the event bubbling chain so that it can intercept events triggered by all descendant elements) is what you need here.

Here's an example:

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

edited Mar 8, 2018 at 19:47

answered Mar 8, 2018 at 19:18

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Scott Marcus Over a year ago

@J.G.Sable You're welcome. Don't forget to up vote the answer as well. Good luck.

J.G.Sable Over a year ago

so I'd use this, get the ID of the btn clicked, then use a giant switch statement to do an ajax call on matching the ids?

Scott Marcus Over a year ago

@J.G.Sable Exactly. I updated the answer just to show that getting the unique id is super simple.

J.G.Sable Over a year ago

Yeah, i got it to work on mine and graph all the different intervals. Just a few issues, but I think it has to do with chartjs. Perhaps not. more work to do.

Napoli · Accepted Answer · 2018-03-08 19:09:27Z

0

Is it feasible to place your search term outside of the event, as a global? Then it would be accessible by all functions.

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

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

answered Mar 8, 2018 at 19:09

Napoli

1,4032 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Button click event inside another button click event?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related