Html 前端写在js脚本里面的Button事件不响应
前端html代码
<div id="js-pub-container" class="issques clearfix js-form">
<div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
<textarea id="js-pl-textarea" class="text" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥!" >
</textarea>
</div>
<!--以下是我定义的一个input标签内的 button按钮-->
<input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="发表评论" >
<p class="global-errortip js-global-error"></p>
以下是前端js代码
$('#js-pl-submit').onclick=function(){
//下面就没有进入,弹出
alert('按键响应成功!')
var comments = $("#js-pl-textarea").val();
if (comments === "") {
return
}
$.ajax({
cache: false,
type: "POST",
url: "{% url 'courses:add_comment'%}",
data: {'course_id': 10, 'comments': comments},
async: true,
//设置CSRF_TOKEN 安全
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy");
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");//取csrf_token的值
},
//表单提交
success: function (data) {
if (data.status === 'fail') {
if (data.msg ==='用户他妈的未登录') {
alert('请登陆后再评论!');
window.location.href = "{% url 'user:login' %}";}
else {alert(data.msg)}
}
else if (data.status === 'success') {
window.location.reload();//刷新当前页面.
}
}
});
}
通过id标签绑定到html的button按钮上,但是在前台点击按钮提交的时候,没有响应弹出。
而后发现可能是加载页面的顺序出了问题,js在页面加载之前就已经加载完成,然后便在js脚本前加入了$function(){}
$function(){
$('#js-pl-submit').onclick=function(){
//下面就没有进入,弹出
alert('按键响应成功!')
var comments = $("#js-pl-textarea").val();
if (comments === "") {
return
}
$.ajax({
cache: false,
type: "POST",
url: "{% url 'courses:add_comment'%}",
data: {'course_id': 10, 'comments': comments},
async: true,
//设置CSRF_TOKEN 安全
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy");
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");//取csrf_token的值
},
//表单提交
success: function (data) {
if (data.status === 'fail') {
if (data.msg ==='用户他妈的未登录') {
alert('请登陆后再评论!');
window.location.href = "{% url 'user:login' %}";}
else {alert(data.msg)}
}
else if (data.status === 'success') {
window.location.reload();//刷新当前页面.
}
}
});
}
}
经过测试,依旧没有成功响应,不过记录了一种可能性。
最后无奈只能将button事件写在html行间去进行处理,结果弹出来响应。