我只是在设计一个关于烹饪食谱的网络项目。当用户想在她的食谱中添加一种配料时，她需要使用动态列表逐个添加配料，我正试图用jquery（AJAX）对其进行编码。
我的问题是，如果用户输入一个单词的成分，效果会很好。但若用户输入多个单词的成分，就会发生奇怪的事情。（是的，我甚至无法解释到底发生了什么。发现了新手javascript程序员。）这是代码行：
$("#inglist").append("<br id="+i+"><div id="+i+">"+$("#ingredient").val()+" <a href='#' onClick=removeIngr('"+ingr+"',"+i+")>Remove</a></div>");
该代码行假设添加<br>和<div>标签、作为id属性的成分索引号、带有onClick事件的成分名称（来自id为'gredient'的输入行）标签，该事件调用removeIngr（ingredientName，index）方法
如果用户输入"Tomato"，它将生成以下内容：
<div xmlns="http://www.w3.org/1999/xhtml" id="0">Tomato <a onclick="removeIngr('Tomato',0)" href="#"> Remove</a></div>
它看起来和工作都很酷。（只是我刚刚意识到，href属性正在以某种方式移动到最后。）
如果用户输入"黑胡椒"，它会生成以下内容：
<div xmlns="http://www.w3.org/1999/xhtml" id="3">Black Pepper <a pepper',3)="" onclick="removeIngr('Black" href="#">Remove</a></div>
正如你所看到的，所有的东西都混在一起了。那么发生了什么？有什么帮助吗？
谢谢你抽出时间。
您需要在onClick属性周围加引号，否则会有一个空格标记其末尾。使用'"可以在引号内加引号。
$("#inglist").append("<br data-id='"+i+"'><div data-id='"+i+"'>"+$("#ingredient").val()+" <a href='#' onClick='"removeIngr('"+ingr+"',"+i+")'">Remove</a></div>");
我已经将id属性更改为data-id，因为不应该有多个元素具有相同的id，id也不应该以数字开头。
试试这个：
$("#inglist").append("<br id="+i+"><div id="+i+">"+$("#ingredient").val()+" <a href='#' onClick=removeIngr("+ingr+","+i+")>Remove</a></div>");