使用onclick参数动态创建按钮

Question

可能重复:
如何将参数传递给事件处理函数并仍然使用'this'引用？

我已经做了一些搜索,但我很难找到解决方案,所以如果有人认为这是重复我会很感激你说你输入的内容...似乎我的搜索能力已经休息了一天!:无论如何:

function CreateMe(){

    //....

    var mycell = row.insertCell(-1);
    var myelement3 = document.createmyelement("input");
    myelement3.type = "button";
    myelement3.value = "Delete";
    myelement3.onclick = DeleteMe;
    myelement3.name = "Delete[]";
    mycell.appendChild(myelement3);

    //....

}

function DeleteMe(){
    alert(this);
}

我有一个带有按钮的表单,该按钮调用CreateMe,动态创建一个按钮.我所追求的是当单击此动态按钮时能够将参数传递给DeleteMe函数; 特别是这个:

onclick="DeleteMe(this.parentNode.parentNode.rowIndex)"

来自:http://www.java2s.com/Code/JavaScript/HTML/Deletingtablerows.htm

我对如何前进这里感到有点失落,所以如果有人可以伸出援助之手,我将不胜感激.

编辑:为了清楚起见,我要问的是如何将动态生成按钮的onclick事件中的参数传递给DeleteMe函数.很明显我无法做到这一点,因为这只会立即评估函数:

    myelement3.value = "Delete";
    myelement3.onclick=DeleteMe(this.parentNode.parentNode.rowIndex);
    myelement3.name = "Delete[]";

Answer 1

你快到了..onclick期望是一个函数,所以你要做的就是将该函数调用包装到另一个函数中:

myelement3.onclick = function() { 
    DeleteMe(this.parentNode.parentNode.rowIndex);
    // or
    // DeleteMe.call(this, this.parentNode.parentNode.rowIndex);
    // to set `this` inside `DeleteMe` to the DOM element as well.
};

如果浏览器支持.bind,您甚至可以:

myelement3.onclick = DeleteMe.bind(
    myelement3, 
    myelement3.parentNode.parentNode.rowIndex
);

但是这会myelement3.parentNode.parentNode.rowIndex在创建时评估,而不是在单击元素时评估.如果元素改变了它们的位置,这可能会导致问题,在这种情况下,你宁愿选择第一个解决方案.

另外,因为this引用了clicked元素,你可以访问里面DeleteMe的行索引:

function DeleteMe(){
    var index = this.parentNode.parentNode.rowIndex;
}

// ...

myelement3.onclick = DeleteMe;

只要您DeleteMe只调用事件处理程序而不是手动调用,这就可以工作.