关于js中函数绑定的button事件不响应的记录(已解决)

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行间去进行处理，结果弹出来响应。

总结：虽然解决了当前问题，但是出现的bug未能参透，猜测可能是因为绑定id问题导致没能将事件绑定到想要的按钮上，所以在点击按钮的时候，无法弹出响应。暂时记录，日后再做解决。

追加：问题已解决，是出在按键绑定问题上，标签名重复导致同一个id的标签被多个按钮事件绑定，修改标签就就能解决

添加：关于 js函数加入$function(){}的理由，是为了让JS脚本/文件再整个html页面加载完成之后，在做加载。这样页面就能检测到js的一些函数，事件等等….