StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAdding a close button to a DIV that was appended on .click
text
Body
copied!<p>I have been working on some jQuery code for an interactive map. I've already gotten some fantastic help from a user named "Kevin Gurney" on here, so big thanks to him. I'm now having another little issue, and was wondering if someone could advise.</p> <p>Basically, when a user clicks on a point on my map, a DIV is appended with a full description of that map point. I want to add a closing "X" icon in the top right of this DIV, so that the user can close it, however it seems that the first click event is stopping my second click event from working.</p> <p>Here is <a href="http://jsfiddle.net/qw2v5/" rel="nofollow">some sample of the code</a>:</p> <pre><code>$(".point").live("mouseenter", function() { //code to show description $(this).append('<div class="mapitem-smalldescription">Small description</div>'); }); $(".point").live("mouseleave", function() { //code to show description $(".mapitem-smalldescription").fadeOut("normal", function() { $(this).remove(); }); }); $(".point").live("click", function() { //code to full description $(this).append('<div class="mapitem-fulldescription"><div class="close">x</div>Full description</div>'); }); $(".close").live("click", function() { //code to close description, dosent work $(".mapitem-fulldescription").fadeOut("normal", function() { $(this).remove(); }); }); </code></pre> <p>Click on one of the squares, the hover event is seperate. then click on the X at the top right side and nothing happens!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload