即使类名不存在，Javascript事件仍会触发 [英] Javascript event still firing even when class name doesn't exist

问题描述

有人可以向我解释一个事件，当它所针对的类名不存在时，该事件将如何触发.

Can someone explain to me how an event would fire when a class name it's targeting doesn't exist..

代码

 (function ($) {

    var config = {};

    $(document).ready(function () {

        var wi = $(window).width();

        if ( wi > 768 ) {
            $('body').addClass('dosomething');
        } else {
            $('body').removeClass('dosomething');
        }

        $(window).resize(function() {

            var wi = $(window).width();

            console.log(wi);

            if ( wi > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }

            var $container = $('.email-signup__wrap'),
            $cHeight = $('.email-signup').outerHeight();

            // $('.dosomething .email-signup__wrap').on('mouseenter mouseleave', function(ev) {
            $('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {

                var $this = $(this);

                if ( ev.type === 'mouseenter' ) {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                }
                else
                {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            });
        });
    });

})( jQuery );

我已经为每个选择器添加了dosomething类，以防止事件在小于768px的屏幕上触发.

I've gone a little overboard adding the dosomething class to every selector to try prevent the event from firing on screen sizes below 768px.

基本上，用户将鼠标悬停在页脚栏上，并且联系人表单从画布上弹出，但是在较小的屏幕/移动设备上，它在页面内容的基础上保持静态.

Basically the user hovers over a footer bar and a contact form pops up from off canvas, however on smaller screens/mobile, it remains static at the base of the page content.

我知道这是基本的代码，但是，我已经尝试了好几天，并且我急于寻找一些代码来寻找解决方案.

I know this is rudimentary code, however, I've been trying to get this working for days and I'm rushing bits of code to try find a solution.

我不需要工作，媒体查询等等.我真的很想了解这一点，因为我很理智.

I'm not after work arounds, media queries etc.... I really want to understand this for my own sanity.

最终解决方案

  (function ($) {

        var config = {};

        $(document).ready(function () {

            $(window).on("resize", function () {
                resizeWindow();
            }).trigger("resize");

            var $container = $('.email-signup__wrap'),
                $cHeight = $('.email-signup').outerHeight();

            $(document).on({
                mouseenter: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                },
                mouseleave: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            }, ".dosomething .email-signup__wrap");
        });

        function resizeWindow() {
            config.wWidth = $(window).width();

            if ( config.wWidth > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }
        }

    })( jQuery );

推荐答案

在jquery中使用event delegation.您可以动态添加.dosomething

Use event delegation in jquery. you dynamically add the class .dosomething

$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {

这篇关于即使类名不存在，Javascript事件仍会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！