Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Youseef Al Taher
Courses Plus Student 842 PointsNesting .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.
$("#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
}
}
Am I using the .click() event incorrectly, or is there some other function that will do what I need?
Thank You
3 Answers
Gloria Dwomoh
13,116 PointsHi Youseef, you forgot to close the parenthesis you opened and adding semicolon. I am not sure what you are trying to do, but try changing this
$("#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
}
}
to
$("#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
});
});
Gloria Dwomoh
13,116 PointsI still am not sure of what you are trying to do. I didn't understand the description of what you said you are trying to do, but if those two buttons are in the same page and what I think is what you want, you can try this and see if it helps.
$('#adress').click(function(){
//Some action here based on #address click event
$('#profession-1, #profession-2').click(function(event){
if($(event.target).attr('id')=='profession-1'){
/* Some action if #profession-1 was clicked after #address */
}
else if($(event.target).attr('id')=='profession-2'){
/* Some other action if #profession-2 was clicked after #address */
}
});
});
Edit: By the way I edited a mistake I had.
Sean T. Unwin
28,690 Pointsafter a person clicks on the #adress button, he/she would be able to click one of the two buttons
Perhaps you want the #profession-x buttons disabled until #address is clicked? If so, and expanding upon gloria's example, you could try something like:
// disable the #profession-x buttons
// on page load or ready, or even explicitly in the HTML for the buttons
$('#profession-1, #profession-2').disabled = true;
$('#adress').click(function(){
// Enable #profession-x buttons
$('#profession-1, #profession-2').disabled = false;
//Some action here based on #address click event
});
$('#profession-1, #profession-2').click(function(event){
if($(event.target).attr('id')=='profession-1'){
/* Some action if #profession-1 was clicked after #address */
}
else if($(event.target).attr('id')=='profession-2'){
/* Some other action if #profession-2 was clicked after #address */
}
});
Youseef Al Taher
Courses Plus Student 842 PointsYouseef Al Taher
Courses Plus Student 842 PointsHey Gloria,
In my original code I have the parenthesis there thank you though! I am trying to have two .click() events after each other. So for example, after a person clicks on the #adress button, he/she would be able to click one of the two buttons on the next page (either #profession-1 or #profession-2). For some reason, after I click the first button, the second button never responds.
Youseef Al Taher
Courses Plus Student 842 PointsYouseef Al Taher
Courses Plus Student 842 PointsSomeone had replied saying I should use:
$('#adress').on('click', '#profession-1', function() {alert("x1")}).on('click', '#profession-2', function() {alert("x2")});
but its not working. The code never enters the function.
I feel like the the mouse clicks never register
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsWhen you say 'on the next page', are #profession-1 and #profession-2 in a separate html document than #address or are they in a different section of the same page?
Youseef Al Taher
Courses Plus Student 842 PointsYouseef Al Taher
Courses Plus Student 842 PointsHey Sean, I meant they are in a separate html document than #address
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsJavaScript variables and nesting of events cannot be passed between pages without the use of cookies, LocalStorage, or server-side scripting so your idea will not be able to work without incorporating one of those.
Youseef Al Taher
Courses Plus Student 842 PointsYouseef Al Taher
Courses Plus Student 842 PointsOh alright, that explains it. So if I were to learn to implement one of the three you suggested, which one do you think is the simplest/best approach.
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsSince you're using jQuery, cookies would be the easiest. Although, I don't know why you would unless a user has to click on #address previously in order to click on either of the #profession and yet, if so, I'm not sure that is a good model for UX (user experience).
Youseef Al Taher
Courses Plus Student 842 PointsYouseef Al Taher
Courses Plus Student 842 PointsI didn't use the best names to exemplify what I am trying to do. Basically when clicking the first button on the first page, I want to pull certain information from my database. Afterwards, when clicking the second button on the page, I want to filter out certain entries from the information that was just pulled off the database. So, the first button for example might be 'painter', the second button might be the area the painter lives in so 'address', and from these two, I get the painters that are relevant to my search.