脚本在 html 正文标记之外不起作用答案

【问题标题】：Script not working outside html body tag脚本在 html 正文标记之外不起作用
【发布时间】：2017-05-24 05:43:59
【问题描述】：

我有一个基本模板，可以很好地与我在此处发布的格式配合使用。但是，我想将脚本保留在一个块内，但是当我将其中一个脚本从正文移动到头部时，单击时菜单不会下降。我该如何解决这个问题？

html：

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}


    <title>
        {% block title %}BPM App{% endblock title %} 
    </title>

    {% block stylesheets %}
        <link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
        <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
    {% endblock %}

    {% block javascript %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script>
            $(function() {
                cbpHorizontalMenu.init();
            });
        </script>
    {% endblock javascript %}

    {% block extra_head %}{% endblock %}
    </head>

    <body>
        {% include 'bpmapp/_topnavbar.html' %}

        {% block content %}
        {% endblock content %}

        <script src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

    </body>
</html>

cbpHorizontalMenu.min.js：

var cbpHorizontalMenu = (function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("click", a);
        b.on("click", function(h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    }

    function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    }
})();

编辑为：

var cbpHorizontalMenu =$( document ).ready(function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    $(function f() {
        g.on("click", a);
        b.on("click", function(h) {
            h.stopPropagation()
        })
    });

    $(function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    });

    $(function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    });
})();

【问题讨论】：

标签： javascript html django django-templates

【解决方案1】：

您尝试在 DOM 上扩充的元素可能尚未完成加载，因此在 javascript 运行时不存在。通过将其保持在主体的底部，当 javascript 运行时元素就存在。您可以使用类似

$( document ).ready(function() {
  var cbpHorizontalMenu = {};
});

更多信息在这里https://api.jquery.com/ready/

【讨论】：

我编辑了 js 文件，但仍然无法在单击时获得菜单下拉菜单。我所做的编辑是否完全正确？现在可以在问题中看到编辑好的js文件了
能否请您编辑原始的js文件，我必须看看您如何更改它？我不知道你想如何用原始文件实现它

【解决方案2】：

如果您要将脚本包含在页面的头部（因此在正文标记之前），则无需逃避将 jQuery 作为项目的一部分（对于跨浏览器可靠性目的）。我建议您下载它以便能够从您的磁盘本地加载它，否则，这是它的在线链接，您可以将其添加到您的头部（就在您自己的脚本标签之前）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

您现在需要使用 jQuery 来确保在执行脚本之前您的 DOM 已完全加载，您可以通过将整个脚本代码包装在 ready 函数中来做到这一点：

$(document).ready(function () {
    var cbpHorizontalMenu = (function() {
        var b = $("#cbp-hrmenu > ul > li"),
            g = b.children("a"),
            c = $("body"),
            d = -1;

        function f() {
            g.on("click", a);
            b.on("click", function(h) {
                h.stopPropagation()
            })
        }

        function a(j) {
            if (d !== -1) {
                b.eq(d).removeClass("cbp-hropen")
            }
            var i = $(j.currentTarget).parent("li"),
                h = i.index();
            if (d === h) {
                i.removeClass("cbp-hropen");
                d = -1
            } else {
                i.addClass("cbp-hropen");
                d = h;
                c.off("click").on("click", e)
            }
            return false
        }

        function e(h) {
            b.eq(d).removeClass("cbp-hropen");
            d = -1
        }
        return {
            init: f
        }
    })();
});

【讨论】：

在我将脚本行移到头部之前它也不起作用，所以js代码执行有问题