CODEWITHSUNDEEP
javascriptjqueryhtml
user3438980
user3438980

Reputation: 47

Nesting JQuery .click() events

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!

Upvotes: 0

Views: 630

Answers (2)

mdance
mdance

Reputation: 996

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.

Upvotes: 0

Alex
Alex

Reputation: 35407

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")}
);

Further Reading:

Upvotes: 2

Related Questions