event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with:

        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();
        });

I'm trying to incorporate a close button into this custom image popup. The close button is visible, but it seems that the mouse events are not triggering as expected. Despite that, the button does respond properly to CSS hover effects.

Below is the corresponding CSS for the setup:

.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

My hypothesis is that due to the absence of a .service-map-close element during the execution of your code, there is no object to bind the event to.

You can attempt using the subsequent syntax to link the event to the document, ensuring it will trigger even for elements added to the document at a later time (not yet confirmed):

$(document).on("mouseover", ".service-map-container", yourHandlerHere);

Answer №2

Recommendation for moving code:

$('.service-map-close').on('mouseover', function () {               
    $('.service-map-container').remove();
    $('.black-overlay').hide();
});

Consider placing this snippet at the end of the event handler

$('body.page-service-map img, body.page-contact img').on('click', function() {
. This ensures proper content binding as .service-map-closer may not be present yet.

In addition, it is advisable to reuse a static overlay element instead of creating a dynamic one each time. Simply show/hide as necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance with text alignment?

23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...

How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option. Is t ...

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

CSS code to create a single content bar flanked by two sidebars

I have been working on a beginner-friendly webpage and have managed to style it using CSS to some extent. My goal is to have the content centered with a white background, flanked by two sidebars styled in blue. To work on this page, please visit: The ...

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

It's a frequent occurrence in mobile apps to have a navbar with selectable text options that overflow horizontally without breaking into a new line. Instead, users must scroll horizontally to access all the options available. Is there a way for me to ...

Adjust the width of a div based on its height dimension

I have a div called #slideshow that contains images with a 2:1 aspect ratio. To set the height of the image using jQuery, I use the following function: Keep in mind that the Slideshow Div is always 100% wide in relation to the browser window. If the use ...

What is the best way to create rounded thumbnails with the paperclip gem?

I noticed that the latest version of Basecamp is implementing this feature, you can check it out in this link. I am curious about how to replicate this in my Rails 3 application. ...

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

Challenges with Font-face in Internet Explorer 8

I have implemented a custom font-family using the following CSS rule: @font-face { font-family: 'matrix'; src: url('MaSGRgLn.eot'); src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url(' ...

gallery showcasing pictures with a prominent main image and accompanying smaller images

I am struggling to display my image gallery the way I envision it. I would like to have a larger main image with the rest of the images displayed on the right side below it. The current code I have is: <div class="gallery"> <a href=" ...

The scrolling feature induces a contraction to the left side

Recently, I implemented the code below to fix my menu when scrolling the page: var num = 5; $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('.scroll').css({'position':'fixed&apo ...

I am unable to align the image in the center, what could be causing it not to center properly?

Why does my code center in mobile view but not in Desktop? How can I solve this issue? I have tried using display: block; margin: auto; width:100%; and text-align: center;, but it did not work. let $slides, interval, $selectors, $btns, currentIndex, ne ...

Adjusting the width of a Material UI drawer: Tips and tricks

Currently, I am working on implementing the Material UI drawer and anchoring it to the top of my page. It is functioning correctly, however, I am encountering an issue where I am unable to adjust the width of the drawer. Despite trying to update the width ...

How can I incorporate a custom font into my Git Pages website?

Having trouble adding an external font to my GitHub page. The font is in my directory, but I can't seem to get it to work on the page at https://github.com/Aadesh9985/Aadesh9985.github.io I've attempted various methods without success... I came ...

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

Angular has the feature of a right float button with *ngfor

I've successfully implemented a form using Reactive Forms in Angular. Currently, my form is displayed as follows: <div class="center" appMcard> <form [formGroup]="GroupRMPM_FG"> <div formArrayName="GroupId_Name" *ngFor="let ...

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...