位置是未定义的代码点火器

Question

在许多视图上都会出现问题。 出现此问题的页面，我的其他javascript和ajax在它们上无法正常运行。 请为该问题提供解决方案。

// Magic line

function magicline_init(){

    var $el, leftPos, newWidth;

    if ( !$('.inner-nav').hasClass('mobile_nav')) {

        $("header .inner-nav > ul").addClass("magic-line-main");
        $("header .magic-line-main").append("<li class='magic-line-main-li'></li>");

        if ($("header .inner-nav > ul > li > a").hasClass("active")) {
            $("header .inner-nav > ul > li > a.active").parent("li").addClass("active-li");
        }

        var $magicLine = $(".magic-line-main-li");

        $magicLine 
            .width($(".active-li").width())
            .css("left", $(".active-li").position().left) 
      // on this line error is occured //TypeError:$(...).position(...) is undefined

            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        $(".magic-line-main > li:not(.slash)").on({
            mouseenter: function() {
                $el = $(this);
                leftPos = $el.position().left;
                newWidth = $el.width();
                $magicLine.stop().animate({
                    left: leftPos,
                    width: newWidth
                });
            },
            mouseleave: function() {
                $magicLine.stop().animate({
                    left: $magicLine.data("origLeft"),
                    width: $magicLine.data("origWidth")
                });
            }
        });
    }