Javascript 事件似乎没有被添加到动态生成的文本框中答案

【问题标题】：Javascript event doesn't seem to get added to a dynamically generated textboxJavascript 事件似乎没有被添加到动态生成的文本框中
【发布时间】：2010-02-25 12:23:22
【问题描述】：

我在 javascript 中为动态添加的文本框添加了 onkeyup javascript……但它似乎不起作用……

var cell4 = row.insertCell(3);
cell4.setAttribute('align','center')
var e3 = document.createElement('input');
e3.type = 'text';
e3.name = 'txtqt' + iteration;
e3.id = 'txtqt' + iteration;
e3.onkeyup = totalAmount(event,this,'tblsample');//Adding this lines doesnt work
e3.size = 10;
cell4.appendChild(e3);

但是当我使用时

e3.onkeyup = totalAmount;

成功了...这是我的 javascript 函数，

函数 totalAmount(e,obj,tblid) {

var tbl = document.getElementById(tblid);
//alert(tbl);
var tblRows = tbl.rows.length;
//alert(tblRows);
var result =0;

var str1;
if (obj != null) {
  str1 = obj.id;
} else {
  str1 = this.id;
}
var lastChar = str1.substring(5,str1.length);
//alert(lastChar);

if(str1=='txtqt'+lastChar)
{
    var str2 = 'txtup'+lastChar;
    var str3 = 'txtAmount'+lastChar;
    var txtDeduct = document.getElementById(str1).value;
    var txtAmt = document.getElementById(str2).value;
    var txtTotal = document.getElementById(str3);
    var totRes = txtAmt*txtDeduct;
    //var res = formatNumber(totRes,2)
    txtTotal.value = totRes.toFixed(2)
    document.getElementById('txttotAmount').value = totRes.toFixed(2);


    for(i=1;i<=tblRows;i++)
    {
    //alert(tblRows);
        txtTotID = 'txtAmount'+i;
        if(document.getElementById(txtTotID).value!='')
        {

            result =parseFloat(result) + parseFloat(document.getElementById(txtTotID).value);

            //var res= formatNumber(result,2)
            document.getElementById('txtTotalAmount').value = result.toFixed(2);
            document.getElementById('txttotAmount').value = result.toFixed(2);
            //document.getElementById('txtTotalAmount').value = result;
        }

    }

}

}

【问题讨论】：

标签： javascript textbox onkeyup

【解决方案1】：

您需要将函数调用包装在匿名函数中：

e3.onkeyup = function(event){ totalAmount(event,this,'tblsample'); }

但为了实现跨浏览器兼容性，更好的方法是使用 addEvent 函数：

function addEvent(obj,type,fn){
    if (obj.addEventListener){
        obj.addEventListener(type,fn,false);
    } else if(obj.attachEvent){
        obj["e"+type+fn]=fn;
        obj[type+fn]=function(){
            obj["e"+type+fn](window.event);
        };
        obj.attachEvent("on"+type,obj[type+fn]);
    };
};

然后使用该函数添加事件：

addEvent(e3,'keyup',function(event){ totalAmount(event,this,'tblsample'); });

只是处理事件的更好方法。我建议你改用这种方法。

【讨论】：

@chandru_cp 对不起。试试 addEvent(e3,'keyup',function(event){ totalAmount(event,this,'tblsample'); });
@chandru_cp 太好了。我建议您考虑使用那里的不同库。 Prototype 和 jQuery 都是很棒的工具。它们具有出色的事件处理功能和大量其他功能，使编码更快、更容易，最重要的是跨浏览器。 prototypejs.org/api/element/observe
@sparkyfied 我自己和 chandru 发布了这个问题......我正在使用 jquery，但他现在正在学习它......

【解决方案2】：

onkeyup 是一个函数。如果你将totalAmount(event,this,'tblsample'); 的返回值传递给它，它将不起作用（除非它返回一个函数）。

e3.onkeyup = totalAmount; 可能就够了。

然后在totalAmount里面..

function totalAmount(event) {
    alert(this); // this is the e3 object
}

所以如果您需要this 和'tblsample' 参数，我建议您将它们添加到e3 对象中，以便您可以通过totalAmount 函数中的this 关键字访问它们：

e3.otherScope = this;
e3.tblid = 'tblsample;
e3.onkeyup = totalAmount;

和..

function totalAmount(event) {
    alert(this); // this is the e3 object
    alert(this.otherScope); // the `this` object in the other scope
    alert(this.tblid); // 'tblsample'
}

或者你可以简单地做

var otherScope = this;
e3.onkeyup = function(event) { 
    totalAmount(event, otherSope, 'tblsample'); 
};

【讨论】：