each - Why is this JQuery popup reappearing? -
each - Why is this JQuery popup reappearing? -
i have jquery popup function shows text when users click link. click "close" close pop-up. pretty straight forward.
the problem pop-up reappears after closed.
here's problem bit:
javacript $.fn.mypopup = function(popuptext) { var popuphtml = '<div class="messagepop pop">' + popuptext + '<p align="right"><a class="close" href="#">close</a></div>'; this.each(function() { $(this).click(function(){ $(this).addclass("selected").parent().append(popuphtml); $(".pop").slidefadetoggle() }); homecoming false; }); $(".close").on('click', function() { alert('in close function - slidefadetoggle on: ' + popuptext); $(".pop").slidefadetoggle(); alert('just did slidefadetoggle, removeclass on: ' + popuptext); $(this).removeclass("selected"); alert('just did removeclass on: ' + popuptext); }); homecoming this; }; $("#word1234").mypopup("lorem ipsum"); $("#wordabcd").mypopup("hello world"); html <a href="#" id="word1234">supercalifragilisticexpialidocious</a> <br> <a href="#" id="wordabcd">foo</a> <br>
here's fiddle can see in action: http://jsfiddle.net/n4qcz/3/
why popup reappearing after closes?
the problem aren't stopping event propagation on close click, , since close within element triggers popup works way down, triggering popup click handler well. phone call http://api.jquery.com/event.stopimmediatepropagation/ within the click handler close.
edit
actually append parent, shouldn't trigger sec click, i'd phone call stop propagation anyway. problem line within both close handler , popup handler: $(".pop").slidefadetoggle();
this cause of popups you've generated slidetoggle, meaning 1 time you've created more 1 (which do) on each phone call hidden ones show , shown ones hide. also, slidefadetoggle custom plugin? sure didn't mean slidetoggle() ?
second edit
this line within close problematic: $(this).removeclass("selected");
readup on , jquery this, because within callback referes clicked element (.close) not element added class 'selected' earlier.
jquery each
Comments
Post a Comment