javascript - .on ('mouseover' ) 没有反馈信息

Question

我有这样的ajax请求片段:

    <div>
        <h4>Comments</h4>
        <!-- <form action="/article/comment/create/{{ article.id }}" method='post'> -->
        <form action="#">
        <textarea class="form-control" rows="5" name='comment' id="commentContent"></textarea>
        <br>
        <button class="btn btn-primary" id="commentBtn">Post Your Comment</button>
        </form>
    </div>
</div><!--/class="col-xs-8 col-md-8">-->
</div><!-- row -->

<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/js/jquery-csrf.js"></script>
<script>
$(document).ready(function(){
    var article_id = article.id;
    var num_pages = {{ page.num_pages }};

    $("#commentBtn").on('mouseover', function(e){
        e.preventDefualt();
        alert("clicked")
        var comment = $("#commentContent").val();
        var param = {
            "article_id": article.id
            "content": comment};

        $post("/comment/create/", param, function(data){ 
            var ret = JSON.parse(data);
            if (ret["status"] = "ok") {
                $("#commentConent").val("");
                window.location.href = "/article/detail/{{ article.id }}?page_number=" + num_pages;
            } else {
                alert(ret["msg"]);
            }
        });
    });
});
</script>

我将事件类型设置为mouseover，
但是，当我将鼠标放在“#commentBtn”按钮上时，
什么也没发生。

我的代码可能存在什么问题？

Answer 1

你的代码中有很多语法错误和拼写错误，这就是你的问题的原因，你写的每件事都是正确的，但我建议你应该使用像vscode这样的IDE为了帮助您找到此错误，IDE 可以帮助您查找 undefined variable 或任何语法错误，以帮助您避免此类问题和错误，如果您查看代码，您会发现，

• var num_pages = {{ page.num_pages }}; 这段代码应该是这样的 var num_pages = page.num_pages ; 如果您尝试将 num_pages 提取到变量中，也可以使用 destructuring这是ES6特性

• 您还应该将 $post 更改为 $.post 并将 e.preventDefualt(); 更改为 e。预防默认();

• 我建议您应该了解 ES6 功能，这些功能将使您的代码变得更好并增强 JavaScript 的开发，例如 const let 和箭头函数以及许多很棒的功能，您可以在此处概述这些功能

es6-features

$(document).ready(function() {
    // var article_id = article.id;
    // var num_pages = {{ page.num_pages }};

    $('#commentBtn').on('mouseover', function(e) {
        e.preventDefault();
        alert('clicked');
        var comment = $('#commentContent').val();
        var param = {
            // "article_id": article.id
            content: comment,
        };

        $.post('/comment/create/', param, function(data) {
            var ret = JSON.parse(data);
            if ((ret['status'] = 'ok')) {
                $('#commentConent').val('');
                window.location.href =
                    '/article/detail/{{ article.id }}?page_number=' + num_pages;
            } else {
                alert(ret['msg']);
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <h4>Comments</h4>
        <!-- <form action="/article/comment/create/{{ article.id }}" method='post'> -->
        <form action="#">
        <textarea class="form-control" rows="5" name='comment' id="commentContent"></textarea>
        <br>
        <button class="btn btn-primary" id="commentBtn">Post Your Comment</button>
        </form>
    </div>
</div><!--/class="col-xs-8 col-md-8">-->
</div><!-- row -->