javascript - Jquery previous .html() element still showing when new element clicked -

javascript - Jquery previous .html() element still showing when new element clicked -

i have write code finds anchors , attaches function displays popup of elements text. code mess, able working issue have is:

if click link 1, link 2, click link 1 again, displays link 2's text if click 1 time again displays right text.

i not sure how rewrite or go fixing code display element clicked, text time.

here jsfiddle example: http://jsfiddle.net/2alfl/1/

$(document).ready(function() { function deselect(e) { $('.pop').slidefadetoggle(function() { e.removeclass('selected'); }); } $(function() { $('a').click(function(){ if($(this).hasclass('selected')){ deselect($(this)); } else { $(this).addclass('selected'); $('.pop').slidefadetoggle(); var eltext = $(this).text(); $('#elpop').html("<p>" + "<br><br>" + "you clicked: <br><b>" + eltext + "</b><br><br><br>" + "click anywhere close" + "</p>"); console.log(this); $("#closewin").click(function () { $('.anchorpop').hide(); }); } homecoming false; }); }); $(function close(){ $(document).click(function(){ $('.anchorpop').hide(); }); }); $.fn.slidefadetoggle = function(easing, callback) { homecoming this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); }; });

you're binding next click handler

$("#closewin").click(function () { $('.anchorpop').hide(); });

inside <a> click handler whenever link clicked, multiple handlers beingness added.

you can avoid many unnecessary code using toggleclass() method.

you can bind same event handlers multiple elements passing additional selectors.

after code boils downwards to

$(function () { $('a').click(function () { var htmlstring = "<p>" + "<br><br>" + "you clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "click anywhere close" + "</p>" $('.pop').html(htmlstring).slidefadetoggle(function () { $(this).toggleclass('selected'); }); homecoming false; }); $("#closewin, .anchorpop").click(function () { $('.anchorpop').hide(); }); });

and custome slidefadetoggle function.

updated fiddle

javascript jquery html css