javascript 函数在页面加载时调用，而不是在动态生成的表中单击按钮时调用

Question

我使用 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."


}

Answer 1

这一行:

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