通过动态生成的 href 标签调用 javascript 函数(js 函数有一个参数)

我需要从动态生成的href标签调用getStandards((函数。所有代码都在.js文件中。我经历了许多堆栈溢出问题，但我找不到解决方案。该函数有一个参数(classId(，如下所示：

var ul = $('<ul></ul>');
var li = $('<li></li>');
for (var i = 0; i < classes.length; i++) {
var classId = classes[i].classId;
var html = "";
html = "<li><a href='#' id='" + classId + "' onClick='getStandards(" + 
classId + ")' >" + classes[i].className + "</a></li><br/>";
li.append(html);
}
ul.append(li);
function getStandards(classId) {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有人可以帮助我吗！谢谢。

与其创建多个内联绑定，我建议为此逻辑使用 data 属性和委托事件绑定。

var ul = $('<ul></ul>');
ul.append(
classes.map( aClass => {
return `
<li>
<a href="#" class="class-entry"
data-class-id="${aClass.classId}">
${aClass.className}
</a>
</li>
`;
} )
);
ul.on( 'click', '.class-entry', event => {
let $link = $( event.target );
getStandards( $link.data( 'classId' ) );
} );
function getStandards(classId) {
}

您可以使用template literal使 html 构造更具可读性
将所有类映射到 html 并将它们全部追加一次，可以减少附加到您正在执行的ul的数量
通过将委托事件侦听器附加到ul可以处理其所有子项的单击，并且可以从 data 属性中获取类 id

我冒昧地猜测你没有将ul附加到正文，并且classId是一个字符串。只需稍作修改，此代码即可工作：

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"> . 
</script>
</head>
<body>
<script>
// This code is copyright by nobody and may be used freely without attribution
var ul = $('<ul></ul>');
var li = $('<li></li>');
const classes = [
{ classId: 'id1', className: 'name1'}
];
for (var i = 0; i < classes.length; i++) {
var classId = classes[i].classId;
var html = "";
html = "<li><a href='#' id='" + classId + "' onClick='getStandards("" + 
classId + "")' >" + classes[i].className + "</a></li><br/>";
li.append(html);
}
ul.append(li);
$('body').append(ul);
function getStandards(classId) {
alert('get standards! ' + classId);
}
</script>
</body>

请注意附加到正文以及点击的额外引号。如果你没有这些引号，它将看起来像这样：onclick="getStandards(id1)"无效，因为 id1 是一个字符串

相关内容

最新更新

热门标签：