javascript - 通过 id 单击按钮不起作用

标签 javascript jquery html

我网站上的几乎所有点击功能都不起作用。前几天还可以,但现在不行了。

示例为:

index.php(在 <head> 内)

<link href="/theme/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/theme/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
<link href="/theme/css/bootflat.css" rel="stylesheet" type="text/css"/>
<link href="/theme/css/simple-sidebar.css" rel="stylesheet" type="text/css"/>
<link href="/theme/admin/style.css" rel="stylesheet" type="text/css"/>
<link href="/theme/css/dataurl.css" rel="stylesheet" type="text/css"/>
<script src="/theme/js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="/theme/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/theme/js/site.js" type="text/javascript"></script>
<script src="/theme/js/moment.js" type="text/javascript"></script>
<script src="/theme/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="https://use.fontawesome.com/fa905179b0.js"></script>
<script src="/theme/js/SmoothScroll.min.js" type="text/javascript"></script>
<script src="/theme/js/pace.min.js" type="text/javascript"></script>

按钮

<div class="modal-footer">
    <button type="button" class="btn btn-danger" id="save-new">Submit</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

</body>之后

<link href="/theme/css/animate.css" rel="stylesheet" type="text/css"/>
<script src="/theme/js/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.fs.selecter.min.js" type="text/javascript"></script>
<script src="/staff/main/js/script.js" type="text/javascript"></script>

script.js

$(document).ready(function() {
    function viewPeriods() {
        $.ajax({
            type: "POST",
            data: {
                type: "view"
            },
            url: "/staff/main/ajax/marking-periods.php",
            success: function(data) {
                $("#periods").hide().html(data).fadeIn();
            }
        });
    }

    $("#save-new").click(function() {
        var title = $("#title").val();
        var start = $("#start").val();
        var end = $("#end").val();
        var gstart = $("#gstart").val();
        var gend = $("#gend").val();
        var ptype = $("#type").val();

        $.ajax({
            type: "POST",
            data: {
                title: title,
                start: start,
                end: end,
                gstart: gstart,
                gend: gend,
                ptype: ptype,
                type: "add"
            },
            url: "/staff/main/ajax/marking-periods.php",
            dataType: "json",
            success: function(data) {
                $.notify({
                    icon: data.icon,
                    title: data.title,
                    message: data.message 
                },
                {
                    element: 'body',
                    allow_dismiss: true,
                    newest_on_top: false,
                    type: data.status,
                    icon_type: 'class',
                    template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                        '<button type="button" aria-hidden="true" class="close" data-notify="dismiss"><i class="fa fa-times"></i></button>' +
                        '<span data-notify="icon"></span> ' +
                        '<span data-notify="title">{1}</span> ' +
                        '<span data-notify="message">{2}</span>' +
                    '</div>' 
                });

                $("#new-period").modal("hide");

                viewPeriods();
            }
        });
    });

    viewPeriods();
});

控制台中没有发现错误,所以我真的不知道哪里出了问题。模式不会隐藏,单击按钮后什么也不会发生。其他页面也是这样,以前可以用,现在不行了。

最佳答案

after the </body>

<link href="/theme/css/animate.css" rel="stylesheet" type="text/css"/>
<script src="/theme/js/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="/theme/js/jquery.fs.selecter.min.js" type="text/javascript"></script>
<script src="/staff/main/js/script.js" type="text/javascript"></script>

您已添加 script.js文件位置错误。关闭前应添加</head>或标记,而不是在关闭后 </body>标签。您的页面 HTML 应该如下所示。

<html>
  <head>
    <link href="/theme/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/theme/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
    <link href="/theme/css/bootflat.css" rel="stylesheet" type="text/css"/>
    <link href="/theme/css/simple-sidebar.css" rel="stylesheet" type="text/css"/>
    <link href="/theme/admin/style.css" rel="stylesheet" type="text/css"/>
    <link href="/theme/css/dataurl.css" rel="stylesheet" type="text/css"/>
    <script src="/theme/js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="/theme/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/theme/js/site.js" type="text/javascript"></script>
    <script src="/theme/js/moment.js" type="text/javascript"></script>
    <script src="/theme/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="https://use.fontawesome.com/fa905179b0.js"></script>
    <script src="/theme/js/SmoothScroll.min.js" type="text/javascript"></script>
    <script src="/theme/js/pace.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" id="save-new">Submit</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
    <link href="/theme/css/animate.css" rel="stylesheet" type="text/css"/>
    <script src="/theme/js/bootstrap-notify.min.js" type="text/javascript"></script>
    <script src="/theme/js/jquery.fs.selecter.min.js" type="text/javascript"></script>
    <script src="/staff/main/js/script.js" type="text/javascript"></script>
  </body>
</html>

关于javascript - 通过 id 单击按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41100737/

相关文章:

php - 几个页面布局问题

javascript - 使用 JavaScript 中的 RegExp 删除重复的逗号和开头/结尾处的多余逗号,并删除重复的数字?

javascript - 如何在数字周围制作静态按钮?

javascript - 如何在一条语句中调用 JavaScript 对象方法(方法链)

javascript - 不要重复我自己,带对象的智能循环

javascript - 从另一个模态打开一个模态

javascript - 电子邮件JS : Only works sometimes

javascript - 获取 li jQuery 的位置

javascript - 如何同步2个iframe的滚动条

javascript - 在网站上使用键盘进行简单且正确的导航方式?