событие Javascript, кажется, не добавляются к динамически сгенерированного текстового поля

Question

я добавил OnKeyUp JavaScript для динамически добавленного текстового поля в 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 (е, 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; 
     } 

    } 

} 

}

Answer 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'); }); 

Просто намного лучший способ справиться с событиями. Я бы рекомендовал вам переключиться на этот метод.

Answer 2

onkeyup является функцией. Если вы передадите ему возвращаемое значение totalAmount(event,this,'tblsample');, оно не будет работать (если оно не вернет функцию).

e3.onkeyup = totalAmount;, вероятно, достаточно.

затем внутри totalAmount ..

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

Так что, если вам нужны и аргументы this-х tblsample ", я предлагаю вам добавить их к объекту е3, так что вы можете получить доступ к ним через this ключевое слово внутри функция totalAmount:

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