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

错别字，使用：

e.preventDefault();

也：

$.post

最后，

$("#commentContent")

Answer 2

您的代码中有很多语法错误和拼写错误，这就是问题的原因，您编写的所有内容都正确，但是我建议您使用vscode之类的IDE来帮助您找到此错误，IDE帮助查找未定义的变量或任何语法错误，以帮助您避免此类问题和错误，如果您查看代码，将会发现

var num_pages = {{ page.num_pages }};此代码应如下所示 var num_pages = page.num_pages ;如果尝试将 num_pages 提取到变量中，还可以使用destructuring这是ES6功能
还应将$post更改为$.post，将e.preventDefualt();更改为e.preventDefault();
我建议您应该了解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 -->

.on（'mouseover'）没有反馈信息

2 个答案: