Passing data between two jQuery click events

Question

I need to pass data from one click events. I am building a menu that pulls data on the links a user successively clicks. The first link would be like this:

?type=1

I need to then get that to a link that is:

?level=2

so that the data query is:

?type=1&level=2

The thing is the code needs to dynamically determine the query for the second click, which might or might not be the last query above. The query won't be determined until the user clicks, which needs to return a query string like the above on the second click.

So I have two click handlers:

btn1.on('click', function() {
  // get value of "type" from query string through some regex.  This works.
}

btn2.on('click', function() {
   // get value of "level" via regex.  This works.
   // get value of type from btn1.click and add to query
   // submit query ?type=___&level=____
}

How do I do this? I tried using .bind but couldn't get it working.

Can you give more detail of how your pages are set up? Do the clicks actually take the user to new pages (and therefore refresh), or are they radio-type buttons? I'm confused as to why the click event is necessary if you already have the values in the query string. — cincodenada
– cincodenada, Commented Jul 11, 2013 at 23:00
No, the links are disabled. It's all done through AJAX, but I am pulling the hrefs from the links. This is for a system where a user is building a query to return some data. I need to pass data between click events. — sehummel
– sehummel, Commented Jul 11, 2013 at 23:04
The data is displayed with a div loaded via jQuery load using the query string. — sehummel
– sehummel, Commented Jul 11, 2013 at 23:05

cincodenada · Accepted Answer · 2013-07-11 23:12:49Z

1

You can't directly pass data between click events, at least not without a lot of awkwardness.

What I would suggest is putting the data somewhere that both click events can access it, and somewhere that makes sense. For your case, this probably means data-attributes on some parent element. For instance, if you had two sets of buttons and a "Query" submit-type button, it might look something like this:

<ul id="type_menu">
  <li><a href="...">Type 1</a></li>
  <li><a href="...">Type 2</a></li>
  <li><a href="...">Type 3</a></li>
</ul>
<ul id="level_menu">
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>
<button id="go">Go!</button>

With the following script:

$(function() {
    $('#type_menu').on('click','li a', function() {
        type = parse_type_from_href($(this));
        $('#type_menu').data('selected_type',type);
    }

    $('#level_menu').on('click','li a', function() {
        level = parse_level_from_href($(this));
        $('#level_menu').data('selected_level',level);
    }

    $('#go').click(function() {
        query='?type=' + $('#type_menu').data('selected_type') + '&level=' + $('#level_menu').data('selected_level');
        //Do what you will with the query here...
    })
}

Obviously you'd have to adapt it to your own uses, and this code could be abstracted better if you have a lot of sets of buttons, but from what you've said I think well-placed data- attributes are going to be your best bet here.

answered Jul 11, 2013 at 23:12

cincodenada

3,13929 silver badges36 bronze badges

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

4 Comments

sehummel Over a year ago

Thanks. That could work. I didn't think about a third event.

cincodenada Over a year ago

You could even just put the code from the 'go' button at the end of the level_menu event if you want it to fire there. The key here is storing the data somewhere that both events can access it, and data attributes are the best way to do that.

sehummel Over a year ago

There is no "go" button, but I got the data passed to the second click event in the manner you demonstrated. I tried something similar earlier, but I was using this for the data selector, when I needed to be explicit. Thanks, again.

cincodenada Over a year ago

Indeed, this is a local variable that always refers to the element that received the event.

Collectives™ on Stack Overflow

Passing data between two jQuery click events

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related