Question

我正在动态创建列表。当用户点击那个li元素时，将调用setCollege方法。

生成li的代码是：

$('#dropDown ul').append("
<li onclick=setCollege("+ data[i].id +",'"+ data[i].college_name +"')><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

但javascript会在大学名称中空格后动态添加"，如

<li onclick="setCollege(3,'Nirma" university')"> <i class="fa fa-university"></i>Nirma University</li>

由于"，它在调用js函数时产生错误

Answer 1

onclick是一个html属性，因此需要在引号中加入。

请改为尝试：

var tpl = '<li onclick="setCollege(' + data[i].id + ', ' + data[i].college_name + ' );"><i class="fa fa-university"></i>' + data[i].college_name + '</li>';
$('#dropDown ul').append( tpl );

注意单引号和双引号的使用。

但由于你的问题被标记为jquery，我建议：

var listItem = $( '<li></li>' ).text( data[i].college_name );
$( '<i class="fa fa-university"></i>' ).prependTo( listItem );
listItem.on( 'click', function() {
    setCollege( data[i].id, data[i].college_name);
});
listItem.appendTo( '#dropDown ul' );

Answer 2

因为您没有将周围的"添加到您的onclick属性中：

$('#dropDown ul').append("
<li onclick=\"setCollege("+ data[i].id +",'"+ data[i].college_name +"')\"><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

但为什么不使用jQuery将事件附加到列表项？这将是更好的解决方案：

$('#dropDown').on('click', 'li', function() {
    setCollege(...);
});

Answer 3

尝试使用like：

$('#dropDown ul').append("
<li onclick=setCollege("+ data[i].id +",&quot;"+ data[i].college_name +"&quot;)><i class='fa fa-university'></i>" + data[i].college_name + "</li>");

Answer 4

您的连接以双引号（"）开头。所以你需要一直到声明结束。

试试这个，

"'+ data[i].college_name +'"

而不是

'"+ data[i].college_name +"'

还可以通过onclick事件添加双引号（" "）环绕，然后将其转义，

onclick=\"setcollege(.......)\"

将参数动态传递给javascript函数时出错

4 个答案: