Question

我只是在设计一个关于烹饪食谱的网络项目。当用户想要在她的食谱中添加一种成分时，她需要使用动态列表逐个添加成分，我正在尝试使用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属性，成分的名称（来自id ='ingredient'的输入行）标记带有onClick调用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属性正以某种方式移动到最后。）

如果用户输入“Black Pepper”，则会生成以下内容：

<div xmlns="http://www.w3.org/1999/xhtml" id="3">Black Pepper <a pepper',3)="" onclick="removeIngr('Black" href="#">Remove</a></div>

如你所见，所有人都互相混淆。那么发生了什么？有什么帮助吗？

感谢您的时间。

Answer 1

您需要在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 s从一个数字开始。

Answer 2

试试这个：

$("#inglist").append("<br id="+i+"><div id="+i+">"+$("#ingredient").val()+" <a href='#' onClick=removeIngr("+ingr+","+i+")>Remove</a></div>");

Javascript，onClick事件的产生与我的要求不同

2 个答案: