javascript - 动态向 javascript 函数传递参数时出错

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' );