.on('鼠标悬停') 没有反馈信息

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

你的代码中有很多语法错误和错别字，这就是你问题的原因，你把每件事都写对了，但我建议你应该使用 IDE 像 vscode 来帮助你找到这个错误，IDE 有助于查找未定义的变量，或任何语法错误，以帮助你避免这类问题和错误， 如果你看一下你的代码，你会看到，

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

• 此外，您应该将$post更改为$.post，e.preventDefualt();更改为e.preventDefault();

• 我建议你应该学习ES6功能，这将使你的代码更好，并增强你的JavaScript开发，比如constlet和箭头函数以及许多很棒的功能，你可以在这里概述这个特性

ES6 功能

$(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 -->

Answer 2

拼写错误，请使用：

e.preventDefault();

也：

$.post

最后：

$("#commentContent")