Nesting JQuery .click() events

Question

I want to nest one .click() event with another but its not working. I looked at the .on() event, but I don't think its what I need. Below is basically what I have so far, but its not working as intended.

I want to click on the 'adress1' button, get directed to the next page where I either click the 'profession1' button or the 'profession2' button, and depending on which of the last two buttons is clicked, something respective happens.

//HTML code for first button

<a href="ListofDestricts.html" class="adress" id="adress">adress1</a>

//HTML code on a different page for last two buttons

<a href="#" class="prefession-1" id="profession-1">profession1</a>
<a href="#" class="prefession-2" id="profession-1">profession2</a>

//Javascript/JQuery code

$("#adress").click(function(){
//Some action here based on #address click event
         $("#profession-1").click(function(){
     //Some action if #profession was clicked after #address 
          });
         $("#profession-2").click(function(){
         //Some other action if #profession2 was clicked instead    
         of profession1 
        });
});

Someone had told me to use the following:

$('#adress').on('click', '#profession-1', function() {alert("x1")}).on('click', '#profession-2', function() {alert("x2")});

but its not working either. I feel like my program is not registering the click.

Your help is much appreciated!

Yes this is between two page. I think my approach is not possible. Someone told me I need to use cookies or LocalStorage as javascript variables and nesting are not passed between html pages. — user3438980
– user3438980, Commented Oct 14, 2014 at 15:33

Alex · Accepted Answer · 2014-10-14 14:40:36Z

2

The "root" element, in this case #address, isn't a proper element to attach the click event. You want to attach to some parent element and target a child element. Events in JavaScript bubble up and trickle back down to the element that initiated the event Event Propagation.

To remedy the issue:

$('#someParentEl').on(
    'click',
    '#profession-1',
    function() {alert("x1")}
).on(
    'click',
    '#profession-2',
    function() {alert("x2")}
);

2 Comments

user3438980 Over a year ago

But if I use say root element 'a', then wouldn't any element 'a' on the page be a root element, rather than only the element with id #address?

Alex Over a year ago

use a common parent of both the elements and target it with a specific selector.

mdance · Accepted Answer · 2014-10-14 14:52:23Z

0

The best way to accomplish something like this, is to have data attributes store whether or not something was clicked on... assuming this is a single page web app. Also make sure each id is unique, and referenced correctly for each click event.

<a href="ListofDestricts.html" class="address" id="address" data-clicked="false">address1</a>

Then, when you click on that element, check if the data attribute is true or not on each click of the other elements.

$("#address").click(function(){
 if($(this).attr("data-clicked") == "true") {
  $(this).attr("data-clicked","false")
 } else {
  $(this).attr("data-clicked","true")
  }
 });

$("#profession-1").click(function(){
 if($("#address").attr("data-clicked") == "true") {
 //Some action
 }
 });

 $("#profession-2").click(function(){
 if($("#address").attr("data-clicked") == "true") {
 //Some action
 }
 });

None of this was tested, but it should point you in the right direction.

answered Oct 14, 2014 at 14:52

mdance

9965 gold badges16 silver badges36 bronze badges

2 Comments

user3438980 Over a year ago

But can I nest the .click events? In my program, you can't click 'profession1' or 'profession2' unless you the 'address' button; keeping in mind address and the profession1,profession2 are on different HTML pages.

mdance Over a year ago

If they are on two separate pages, then no. You can't. Javascript only exists on the page it's loaded on, and has no idea about other Javascript on other pages. The first answer is probably closer to what you want... although if you use my way, you can store the variables in Local Storage, rather than on the elements data attribute.

Collectives™ on Stack Overflow

Nesting JQuery .click() events

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related