CODEWITHSUNDEEP
javascriptjquery
PowerMan2015
PowerMan2015

Reputation: 1418

JQuery Mouseleave firing on wrong element

I have implemented a exit popup to my site using the Jquery mouseleave event as below:

$(document).ready(function ($) {
    $(document).mouseleave(function () {
        var modal = $(".bd-exit-modal-lg");
        var modalShown = $(modal).attr("data-modal-shown")

        if (modalShown == "false") {
            $(modal).modal('show').fadeIn();
            $(modal).attr("data-modal-shown", "true");
        }
    });
});

This all works fine except when I'm clicking through some form fields located in the footer of the document the event is firing causing the popup window to show.

I can't figure out why this is happening as the selector for the exit modal is on the document and not the inputs

Any ideas guys?

Upvotes: 2

Views: 211

Answers (1)

Luke T Brooks
Luke T Brooks

Reputation: 557

Try putting an upper level div around the entirety of the HTML so that your mouseleave function will have a more specific target:

<div id="entire-html-doc">
    your other HTML here
</div>

<script>
    $(document).ready(function ($) {
        $('#entire-html-doc').mouseleave(function () {
            var modal = $(".bd-exit-modal-lg");
            var modalShown = $(modal).attr("data-modal-shown")

            if (modalShown == "false") {
                $(modal).modal('show').fadeIn();
                $(modal).attr("data-modal-shown", "true");
            }
        });
    });
</script>

Upvotes: 1

Related Questions