événement Javascript ne semble pas ajoutés à une dynamique générée

Question

zone de texte j'ai ajouté onkeyup javascript pour une zone de texte dynamiquement ajouté en javascript ... Mais il ne semble pas travailler ....

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

Mais quand i utilisé

e3.onkeyup = totalAmount; 

Il a travaillé ... Voici ma fonction javascript,

fonction 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; 
     } 

    } 

} 

}

Answer 1

Vous devez envelopper votre appel de fonction dans une fonction anonyme:

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

Mais une meilleure façon de le faire, pour permettre la compatibilité du navigateur croix serait d'utiliser une fonction 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]); 
    }; 
}; 

Et puis ajoutez l'événement à l'aide de cette fonction:

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

Juste un bien meilleur moyen de gérer les événements. Je vous recommande de passer à cette méthode.

Answer 2

onkeyup est une fonction. Si vous lui passez la valeur de retour de totalAmount(event,this,'tblsample'); cela ne fonctionnera pas (sauf si elle renvoie une fonction).

e3.onkeyup = totalAmount; est probablement suffisant.

puis à l'intérieur totalAmount ..

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

Donc, si vous avez besoin this et les arguments « tblsample », je vous suggère de les ajouter à l'objet e3 afin que vous puissiez y accéder via le mot-clé this à l'intérieur du fonction totalAmount:

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

et ..

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

Ou vous pouvez tout simplement faire

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