Uncaught ReferenceError: EST is not defined

问题遇到的现象和发生背景

用jQuery动态绑定点击事件时,想要传入多个参数,但是当我传入除了this指针之外的参数时,程序就报错(本程序中itemId不能作为参数传入)

问题相关代码,请勿粘贴截图

function addToCart(tr,itemId);
content+="Add to Cart";

运行结果及报错内容

ViewCategoryServlet?categoryId=FISH:1 Uncaught ReferenceError: EST is not defined
at HTMLAnchorElement.onclick (ViewCategoryServlet?categoryId=FISH:1:16)
浏览器报错内容

我的解答思路和尝试过的方法

用字符串拼接的方法,同样不行

我想要达到的结果

传入参数itemId

目测题主组合html代码时,给dom添加onclick之类事件没有用引号扩起itemId的值,直接组合itemId的值如果值是非数字或者布尔变量的话,那么生成的处理函数得到的是itemId的值(EST),将EST当做变量了,没定义过就报错了

引号扩起的话传递给函数的是'EST'这个字符串值,而不是EST这个变量

示例代码如下,题主组合的html应该是第二种,没加引号

img

<script>
    function addToCart(tr, itemId) {
        alert(itemId)
    }
    var itemId = 'EST';
    //注意组合onclick事件函数体时,itemId的值用引号扩起传入的参数值
    document.write("<div href='#' onclick='addToCart(this,\"" + itemId + "\")'>Add to Cart</div>");

    //这里没加引号,点击这个会报错EST is not defined
    document.write("<div href='#' onclick='addToCart(this," + itemId + ")'>Add to Cart</div>");
    //==>生成的HTML <div href="#" onclick="addToCart(this,EST)">Add to Cart</div>
    //这样不难看出,事件传递的是EST变量,而不是EST这个值,引号扩起就行,上面的示例就是传递"EST"这个字符串值
</script>

img

把你的代码用代码段</>的文本形式发一下,我们才能知道原因,好为你解答。

img

EST 没定义

showbo的回答是正确的,传递变量的时候并没有加引号,所以他把itemId当作EST变量处理,其实我后俩也发现了这个问题。于是我把代码改成:

content+="<td id=' "+itemId+" '><a class='Button' onclick='addToCart(this,' "+itemId+" ')'>Add to Cart</a></td>";
$("#table").html(content); 

上述问题得到解决。
但是这样又会引起另一个问题。即该字符串中双引号里存在单引号,单引号里又存在双引号,如此嵌套,编译器不能识别到底哪个引号才是字符串的结尾,因此浏览器会报错,如下

img

最后我使用了el表达式解决这个问题,代码如下

content+=`<td id='${itemId}'><a class='Button' onclick='addToCart(this,"${itemId}")'>Add to Cart</a></td>`;
$("#table").html(content);

感谢大佬们的耐心解答,我写的这个回答希望对大家也有所帮助。