How to use .click() on element in front of another jQuery element

Asked Mar 02 '17 at 17:08

Active Mar 02 '17 at 17:30

Viewed 20 times

I'm working on a page that displays a map via jQuery, and I have a div layered in front of the map, with an x in the corner to be used to close it. When I disable the map, clicking the x closes the div (via jQuery's fadeOut() function), but when the map loads, the x does nothing.

Is there any way to enable the .click() function on a layered div like this? Using a delegated event handler does not solve the problem.

$('#close_btn').click(function() {
    $('#msg1').fadeOut('fast');
});

$(document).on('click','#close_btn',function() {
    $('#msg1').fadeOut('fast');
});

<div class="message" id="msg1">
    <div class="inner">
        <span class="title">Some stuff!</span>
        <span class="tip_msg">Some other stuff.</span>
        <span id="close_btn"><i class="fa fa-times" aria-hidden="true"></i></span>
    </div>
</div>

edited Mar 02 '17 at 17:30

asked Mar 02 '17 at 17:08

McHobbes

Your code works absolutely fine as it is. Are you dynamically appending the HTML of the map to the page after it has loaded? – Rory McCrossan Mar 02 '17 at 17:11
Yes, that is exactly what I'm doing. – McHobbes Mar 02 '17 at 17:12
In which case you need to use a delegated event handler. See the marked duplicate for more information – Rory McCrossan Mar 02 '17 at 17:13
Like `$(document).on('click','#close_btn',function(){ $('#msg1').fadeOut('fast'); })` – RonyLoud Mar 02 '17 at 17:14
That actually isn't solving the issue. Still works when the map is disabled, and ignored when the map loads. – McHobbes Mar 02 '17 at 17:27

How to use .click() on element in front of another jQuery element

0 Answers0