我使用 javascript 动态生成可变长度的 HTML 表,并在该表单内为每一行插入一个按钮。单击按钮时应该调用一个函数,但现在在页面加载/表生成时为每一行调用该函数。如果有多个按钮(因为我为每一行创建一个按钮),则每个按钮都会调用该函数。我知道这一点是因为我在 upVoteA() 中有一个带有调用者姓名的警报。
这是创建按钮的调用部分(整个函数位于本文的底部):
var tr1 = document.createElement('TR');
var upvote = document.createElement('button')
upvote.name = i + offset
upvote.onclick = upVoteA(upvote.name)
upvote.innerHTML = "Upvote link"
tr1.appendChild(upvote)
我是否缺少一些属性来改变这种行为?我的代码有什么问题吗?
此外,这是我调用来生成表的完整函数,以防有帮助。
function answerTableText(idd, offset)
{
var answerDiv = document.getElementById("answerShow")
while(answerDiv.firstChild){
answerDiv.removeChild(answerDiv.firstChild)
}
if(qnumans_array[idd] >0)
{
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i=0; i<qnumans_array[idd]; i++){
var tr = document.createElement('TR');
var td1 = document.createElement('TD')
td1.innerHTML = answer_array[i + offset]
var td2 = document.createElement('TD')
var tr1 = document.createElement('TR');
//tr1.innerHTML = "Upvote"
var upvote = document.createElement('button')
upvote.name = i + offset
upvote.onclick = upVoteA(upvote.name)
upvote.innerHTML = "Upvote link"
tr1.appendChild(upvote)
var tr2 = document.createElement('TR');
tr2.innerHTML = "Downvote"
td2.appendChild(tr1)
td2.appendChild(tr2)
td1.padding = "1em"
td2.padding = "1em"
tr.appendChild(td1)
tr.appendChild(td2)
tr.style.borderBottom = "thin solid #37434E"
tr.style.borderTop = "thin solid #37434E"
tableBody.appendChild(tr);
}
answerDiv.appendChild(table);
}
else answerDiv.innerHTML = "No answers yet."
}
最佳答案
这一行:
upvote.onclick = upVoteA(upvote.name)
调用 upVoteA
并将其返回值分配给 onclick
属性,与此完全相同
a = foo()
调用 foo
并将其返回值分配给 a
。
相反,可以使用显式包装器为其分配一个函数:
upvote.onclick = function() {
upVoteA(upvote.name);
};
...或使用Function#bind
:
upvote.onclick = upVoteA.bind(null, upvote.name);
关于javascript 函数在页面加载时调用,而不是在动态生成的表中单击按钮时调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27552624/