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

Error while passing parameter to javascript function dynamically

本文关键字：函数 出错 javascript 参数 动态      更新时间：2023-09-26

我正在动态创建列表。当用户点击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函数

时产生错误

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

试试这样写:

$('#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>");

您的连接以双引号开始(")。所以你需要跟随直到语句结束。

试试这个,

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

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

还添加双引号(" ")包围onclick事件，并转义它们，

onclick='"setcollege(.......)'"

因为你没有将周围的"添加到你的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(...);
});
相关文章：