event doesn't fire on fixed positioned element - css

Question

I have the following code:
if ($('body.page-service-map').length || $('body.page-contact').length) {
$(document.body).append('<div class="black-overlay"></div>');
}
$('body.page-service-map img, body.page-contact img').on('click', function () {
var c = $(this).clone();
c.addClass('service-map-expanded');
$(document.body).append('<div class="service-map-container"></div>');
$('.service-map-container').append('<div class="service-map-close"></div>', c);
$('.black-overlay').show();
});
$('.service-map-close').on('mouseover', function () {
$('.service-map-container').remove();
$('.black-overlay').hide();
});
It's a custom image popup. Trying to implement close button for it. Close button is seen, but mouse events doesn't fire on it. Though the button reacts properly on css hover effect.
Here is the css:
.service-map-container {
position: fixed;
top: 50%;
left: 50%;
margin-left: -500px;
margin-top: -300px;
width: 1000px;
z-index: 9990;
}
.service-map-close {
position: absolute;
top: -25px;
right: -25px;
width: 28px;
height: 28px;
background: url('../images/close.gif') no-repeat scroll 1px 1px #FFF;
z-index: auto;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
cursor: pointer;
}
.service-map-close:hover {
background-position: -25px 1px;
}
.service-map-expanded {
width: 1000px;
z-index: auto;
}
.black-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 8888;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: none;
}

Answer 1

Here's a guess: since no .service-map-close element exists when you're running that code, there's nothing to bind the event to.
Try the following syntax to bind the event to the document, so that it'll still happen, even for elements added to the document later on (untested):
$(document).on("mouseover", ".service-map-container", yourHandlerHere);

Answer 2

You should move:
$('.service-map-close').on('mouseover', function () {
$('.service-map-container').remove();
$('.black-overlay').hide();
});
At the bottom of $('body.page-service-map img, body.page-contact img').on('click', function() {. Actually if you don't do that you won't bind any content because .service-map-closer doesn't exist yet.
Also, I'd suggest you to not create a dynamic element for the overlay but just use always the same and hide/show it as needed.