JQuery.hide () only works half the time

Question

This may seem very obvious to some people, but I really couldn't understand why something like this could happen, so I'm looking for any help!

I have extended rows, and each row should expand to show its data when pressed or when the next button is pressed. They show and hide correctly when pressed, but I can't get it to work when the next button is pressed.

This is part of .js:

var main = function() { var curQuantity1 = 0; var curQuantity2 = 0; var curQuantity3 = 0; $('.article').click( function() { $('.description').hide(); $('.article').removeClass('current'); $(this).children('.description').show(); $(this).addClass('current'); }); $(".next1").click( function() { if (curQuantity1 + curQuantity2 + curQuantity3 == 3){ console.log("Next clicked"); var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); nextArticle.addClass('current'); $('.description').hide(); $('.current').children('.description').show(); } else { alert("총 3통을 골라주세요"); } }); ...//code here takes care of updating curQuantity so they can add upto 3 }; $(document).ready(main); 

I think that there may be too much time here when pasting the html code, but do it if necessary.

I vaguely suspect that the child is not allowed to change his parent class, but I could not find a way around it.

Thanks in advance for any help! I was stumped all day :(

Answer 1

Since .next1 is inside .article , when you click the "Next" button, the click is also sent to the article containing it, due to event bubbles. So, first the click .next1 handler shows the next element, and then .article shows the old article. The solution is to use event.stopPropagation() to stop the event from bubbles:

 $(".next1").click( function(e) { e.stopPropagation(); if (curQuantity1 + curQuantity2 + curQuantity3 == 3){ console.log("Next clicked"); var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); nextArticle.addClass('current'); $('.description').hide(); $('.current').children('.description').show(); } else { alert("총 3통을 골라주세요"); } });