Javascript evento non sembra ottenere aggiunto a una casella di testo generato dinamicamente
-
22-09-2019 - |
Domanda
Ho aggiunto onkeyup JavaScript per una casella di testo aggiunto in modo dinamico in JavaScript ... ma doesnt sembra funzionare ....
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);
Ma quando ho usato
e3.onkeyup = totalAmount;
Ha funzionato ... Ecco la mia funzione javascript,
funzione 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;
}
}
}
}
Soluzione
È necessario avvolgere la chiamata di funzione in una funzione anonima:
e3.onkeyup = function(event){ totalAmount(event,this,'tblsample'); }
Ma un modo migliore per farlo, per consentire la compatibilità cross browser sarebbe quella di utilizzare una funzione 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]);
};
};
E poi aggiungere l'evento utilizzando questa funzione:
addEvent(e3,'keyup',function(event){ totalAmount(event,this,'tblsample'); });
Solo un modo molto migliore per gestire gli eventi. Suggerirei si passa a questo metodo.
Altri suggerimenti
onkeyup
è una funzione. Se si passa il valore restituito totalAmount(event,this,'tblsample');
non funzionerà (a meno che non restituisce una funzione).
e3.onkeyup = totalAmount;
è probabilmente sufficiente.
poi dentro TotalAmount ..
function totalAmount(event) {
alert(this); // this is the e3 object
}
Quindi, se avete bisogno della this
e gli argomenti dei 'tblsample', vi consiglio di aggiungere all'oggetto e3 in modo che sia possibile accedere tramite la parola chiave this
all'interno della funzione TotalAmount:
e3.otherScope = this;
e3.tblid = 'tblsample;
e3.onkeyup = totalAmount;
e ..
function totalAmount(event) {
alert(this); // this is the e3 object
alert(this.otherScope); // the `this` object in the other scope
alert(this.tblid); // 'tblsample'
}
In alternativa si può semplicemente fare solo
var otherScope = this;
e3.onkeyup = function(event) {
totalAmount(event, otherSope, 'tblsample');
};