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

JavaScript

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points
Posted by Angelic Sanoy
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,580 Points

Onclick Pop-up Issue

Hi Guys, I tried to create multiple onclick pop-up on every team card https://m3mmarketing.ca/team/ . The onclick works fine but when I choose another card for the 2nd time, the pop-up modal stops working. Should I use Ajax or a small tweak can solve my problem? See my screen recording: https://www.loom.com/share/19804577baab47e2aa0a14847cf49e70

Here's the code I use:

<script>
jQuery('a.btn-holder').click(function(e){
e.preventDefault();
var btnlink = jQuery(this).attr('href');
jQuery(btnlink).last().addClass("activated-blog").siblings().removeClass('active-blog activated-blog');

jQuery('.close_pop').click(function(){
jQuery('.pricing_background').toggle();
});
});
</script>

CSS:

/*for pop-up design */
.custom-blog  {
display:none;
}

.active-blog{ 
    display:block;
}

.custom-blog.activated-blog,
.custom-blog.active-blog{ 
    display:block;
}

.see_pricing {cursor:pointer;}
.pricing_background{
background:rgba(0,0,0,.65);
z-index: 100000;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}

.pricing_table {
width:50%;
background-color:white;
padding:3%;
z-index: 150000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media (max-width:768px) {
.pricing_table {
width:90%;
}
}
.close_pop{
cursor: pointer;
padding-bottom: 5%;
font-size: 19px;
text-align: right;
}

1 Answer

Simon Coates
Simon Coates
8,223 Points
Simon Coates
Simon Coates
8,223 Points

I did a demo with:

jQuery('a.btn-holder').click(function(e){
    e.preventDefault();
    var btnlink = jQuery(this).attr('href');
    console.log(btnlink);
    jQuery(btnlink).last().addClass("activated-blog").siblings().removeClass('active-blog activated-blog');

It seemed to work fine. But I had issues with

 jQuery('.close_pop').click(function(){
    console.log("running");
    jQuery('.pricing_background').toggle();

Assuming there is a single button with class of .close_pop, it may be added the function repeatedly, such that it toggle it and then toggles it again. If you think this is what's happening, you can either only attach the event on .close_pop once, or use something like

jQuery('.close_pop').off( "click" ).click(function(){

(I don't really know front end, so I'm guessing. But using your code on a demo page, things worked until I hit the problem with the event being attached repeatedly)