onclick事件未触发

Question

var subjectList;

function PageMaster()
{
    this.contentDiv = document.getElementById("content");
}

/**
 * Builds the main part of the web page based on the given XML document object
 *
 * @param {Object} xmlDoc   the given XML document object
 */

PageMaster.prototype.doIt = function(xmlDoc)

{
    alert("PageMaster()");

alert("Clear page...");
this.contentDiv.innerHTML = "";

if (null != xmlDoc) 
{
    alert("Build page...");

    //create div Post
    var divPost = document.createElement("div");
    divPost.className = "post";

    //create h1 element
    var h1Element = document.createElement("h1");
    var headingText = document.createTextNode("Invitations");
    h1Element.appendChild(headingText);

    //insert h1 element into div post
    divPost.appendChild(h1Element);

    subjectList = xmlDoc.getElementsByTagName("subject");   
    var groupList = xmlDoc.getElementsByTagName("group");

    for (var i = 0; i < subjectList.length; i++) //for each subject
    {
        var divEntry = document.createElement("div");
        divEntry.className = "entry";

        var subjectNum = subjectList[i].attributes[0].nodeValue;
        var subjectName = subjectList[i].attributes[1].nodeValue;
        var groupId = groupList[i].attributes[0].nodeValue;
        var groupName = groupList[i].attributes[1].nodeValue;
        var ownerId = groupList[i].attributes[2].nodeValue;

        //set up the invitation table attributes    
        var table = document.createElement("table");
        table.width = 411;
        table.border = 3;
        table.borderColor = "#990000"

        tableRow = table.insertRow(0);
        tableCell = tableRow.insertCell(0);

        var cellContent = "";

        //create invitation message
        var invitationMsg = "<p>Subject : " + subjectNum + " - " + subjectName + "</p>";
        invitationMsg += "<p>You are invited to join " + groupName + " (groupId : " + groupId + ") by owner Id:" + ownerId + "</p>";
        cellContent += invitationMsg;

        //create buttons
        cellContent += "<input type='button' id='acceptButton" + i + "' value='Accept' onclick='acceptInvitation(i)'>"
        cellContent += "<input type='button' id='declineButton" + i + "' value='Decline'>"

        tableCell.innerHTML = cellContent;

        divEntry.appendChild(table);

        var blankSpace = document.createElement("p");
        divEntry.appendChild(blankSpace);
        divPost.appendChild(divEntry); 
    }

    //insert div post into div content
    this.contentDiv.appendChild(divPost);
    }
};

function acceptInvitation(i)
{
    alert("hello");
    //alert(subjectList[i].attributes[0].nodeValue);
}

上面是我的javascript代码的摘录。代码的作用是从xml文件中创建一个带有接受和拒绝按钮的邀请组表格。当用户按下accept时，表格将消失，下面的表格将向上移动。现在我只是测试我的accept邀请按钮，看看它works.But我在accept按钮中的onclick功能是否由于某种原因不能工作，我不明白。未读取acceptInvitation()中的警报。任何帮助都将不胜感激。谢谢

Answer 1

下面是什么：

cellContent += "[...] onclick='acceptInvitation("+i+")'>"

这样可以确保使用变量的值而不是文字来计算i

Answer 2

试着这样叫它

onclick='acceptInvitation();'

不是这样的

onclick='acceptInvitation(i)'

Answer 3

虽然可能没有解决中心问题，

onclick='acceptInvitation(i)'

在这种情况下，i将是未定义的。

onclick='acceptInvitation("+i+")'

至少能解决一个问题。此外，您还使用了innerHTML和DOM方法的不同寻常的混合。为什么不坚持使用DOM方法并使用attachEvent/AddEventListener呢？

编辑:在http://www.alistapart.com/articles/getoutbindingsituations/上有一篇关于变量绑定的好文章

下面是一个比较特殊的例子。有关更一般的情况，请参阅本文(或使用Prototype之类的库)

var click_hdlr = function() {
    return function() {
        return acceptInvitation.apply(this,arguments);
    }
}

var acc_btn = document.createElement("input");
acc_btn.setAttribute("type","button");
acc_btn.setAttribute("id","accept");
acc_btn.setAttribute("value","Accept");
acc_btn.addEventListener("click",click_hdlr(i),false);