JS中onclick事件的一個坑

今天碰見的這個問題並沒有從源頭上把它理解,只是通過一個變通的方式解決了這個bug…

<!-- 這是之前用到的a標籤,在onclick事件中給方法傳入了兩個參數,並沒有什麼問題,以下稱爲A -->
<a href="javascript:void()" onclick="alertErrorMsg(${declareNumber},${aaa})">錯誤信息</a> 
<!-- 這是在修改之後的a標籤,在onclick事件中傳入一個參數,這時候會出現本文所說的問題,以下稱爲B-->
<a href="javascript:void()" onclick="alertErrorMsg(${declareNumber})">錯誤信息</a>
//這是修改後的方法,只需要傳入一個參數
function alertErrorMsg(declareNumber){
        var url = "xxxxxxxxx";
        var datas = {"declareNumber":declareNumber,_:new Date().getTime()};
        $.ajax({
            url:url,
            data:datas,
            type:"POST",
            success:function(data){
                var result = JSON.parse(data)["result"];
                //layer.alert(typeof JSON.parse(data)["errorList"]);
                var list = JSON.parse(data)["errorList"];
                if(result == 1){//成功,則解析json並遍歷.
                    var str = "";
                    for(var i=0;i<list.length;i++){
                        str += (i+1)+"."+list[i]+"<br/>";
                    }
                    layer.open({
                          type: 1,
                          title:"錯誤信息",
                          skin: 'layui-layer-rim', //加上邊框
                          area: ['600px', '400px'], //寬高
                          content: str
                        });
                }else if(result == 2){//無數據
                    layer.alert('沒有錯誤信息!!!');
                }else{//否則失敗,提示系統異常
                    layer.alert('系統異常!!!');
                }
            },
            error:function(){
                layer.alert('系統錯誤!!!');
            }
        });
    }

A狀態,我傳入的是兩個String類型,onclick沒問題。
B狀態,我傳入的是一個String類型,onclick出現了錯誤提示:

//這裏的fff30368a2774ee69ce41968a473a8ca 是傳入的值
Uncaught ReferenceError: fff30368a2774ee69ce41968a473a8ca is not defined

在這裏我跟公司中的前端討論了很長時間,也沒有一個頭緒.

最後只能將bug解決,然後記錄下來。

解決方法:

<!-- 修改後的a標籤 -->
<a href="javascript:void()" id="errorMsg" class="btn btn-danger">錯誤信息</a> 
<!-- 將後端傳入的值放入一個隱藏域中 -->
<input type="hidden" id="declareNumber" value="${declareNumber }"/>
    //在dom元素加載完成後爲指定的a標籤綁定點擊事件,然後調用上面的js方法與後臺交互
    //注意這裏的解決方法是頁面存在這個標籤
    $(function(){
        $("#errorMsg").click(function(){
            alertErrorMsg($("#declareNumber").val());
        });
    });
    //如果需要點擊的事件是由js創建則使用此方法,此方法需要在創建的標籤中加上指定的class
    $(function(){
        //$("#sample-table")是取要點擊的元素的父級標籤或者祖級標籤
        //on("click",,".numberClass",function(){});則是查找id爲sample-table的子孫標籤中所有class爲numberClass的標籤,併爲其綁定點擊事件,在點擊事件中出發alertErrorMsg()方法
        $("#sample-table").on("click",".numberClass",function(){
            alertErrorMsg($(this).attr("name"));
        });
    });


以上是這個問題的解決方法,但是如果有哪位知道原理的話,希望可以在評論中告知一下,萬分感謝.
ps:這個問題出現的話,只是報js的錯誤,也就是瀏覽器中的console會打印錯誤,而不會進入到後臺.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章