将数据传递给onclick事件会使字符串大写

Question

考虑一下这个小提琴：

 var test = $('#test'); var click = $('#click'); var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; click.click(function() { var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; var html = ''; for (var i = 0; i < data.length; i++) { var id = data[i].id; html += `<li id="${id}" onclick="anyFunction("${id}")">${id}</li>` } test.html(html); console.log(test.html()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="test"></ul> <button id="click">Click me</button> 

单击“单击我”，然后右键单击ID并检查它，您将在onclick事件外看到预期的ID，而其中的一个意外的（去大写）在onclick事件中也有空格。 查看下面的图片。

为什么会出现这种行为的任何想法吗？ 是错误还是我做错了什么？

Answer 1

看起来它已被转换为小写，因为您的HTML字符串未正确转义-jQuery的html()会将属性和元素名称转换为小写：

 $('body').html('<FOO BAR="BAZ"></FOO>'); console.log($('body').html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

要解决此问题， anyFunction的字符串参数改为单引号而不是双引号：

 var test = $('#test'); var click = $('#click'); var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; click.click(function() { var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; var html = ''; for (var i = 0; i < data.length; i++) { var id = data[i].id; html += `<li id="${id}" onclick="anyFunction('${id}')">${id}</li>` } test.html(html); console.log(test.html()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="test"></ul> <button id="click">Click me</button> 

但是内联处理程序是一种糟糕的做法-最好使用Javascript正确附加侦听器，这不仅更好，从设计角度来讲，而且还使您不必担心转义这样的字符串：

 var test = $('#test'); var click = $('#click'); var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; click.click(function() { var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!!@q" }]; var html = ''; for (var i = 0; i < data.length; i++) { const id = data[i].id; const li = $(`<li id="${id}">${id}</li>`); li.on('click', () => anyFunction(id)); test.append(li); } console.log(test.html()); }) function anyFunction(arg) { console.log(arg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="test"></ul> <button id="click">Click me</button>