在Javascript中创建一个元素并添加一个事件

Question

我在向 Javascript 中动态创建的元素添加事件时遇到问题。这是代码：

var monto=document.createElement('input');
monto.type='text';
monto.name='monto'+cantpagos;
monto.id='monto'+cantpagos;
if(monto.addEventListener) monto.addEventListener("blur", sumpagos, false);
else if(monto.attachEvent) monto.attachEvent("onblur", sumpagos);
document.getElementById('pagos').appendChild(monto);

但是它不起作用，一旦我移除焦点，就不会调用该函数。我究竟做错了什么？先谢谢了。

编辑：这是更相关的代码：

function sumpagos()
{
   var total=0;
   for(var i=1;i<=cantpagos;i++)
   {
      total+=document.getElementById('monto'+i).value;
   }
   document.getElementById('total').innerHTML="$"+total;
}

function addpago()
{
var i = 0;
var cuota=document.createElement('select');
cuota.name="cuota"+cantpagos;
cuota.id="cuota"+cantpagos;
for(i=1;i<=3;i++)
{
   cuota.options[i-1]=new Option("Cuota "+i, i);
}
document.getElementById('pagos').appendChild(cuota);
var monto=document.createElement('input');
monto.type='text';
monto.name='monto'+cantpagos;
monto.id='monto'+cantpagos;
if(monto.addEventListener) monto.addEventListener("blur", sumpagos, false);
else if(monto.attachEvent) monto.attachEvent("onblur", sumpagos);
document.getElementById('pagos').appendChild(monto);
document.getElementById('pagos').innerHTML+="<br />";
cantpagos++;
}

---

<td id="total">
$0
</td>

<input type="button" name="maspago" value="Añadir un Pago" onclick="addpago();" />
<input type="button" name="memospago" value="Eliminar un Pago" onclick="deletepago();" />
<div id="pagos"></div>

Answer 1

在这里，这应该可以正常工作：

function sumpagos() {
    var total = 0,
        monto;

    for(var i=1; i <= cantpagos; i++) {
        monto = document.getElementById('monto' + i);
        if ( monto != null ) {
            total += +monto.value;
        }
    }    
    document.getElementById('total').innerHTML = '$' + total;
}

---

试试这个：

var monto = document.createElement('input');
monto.type = 'text';
monto.name = monto.id = 'monto' + cantpagos;
monto.onblur = sumpagos;
document.getElementById('pagos').appendChild(monto);

---

更新：

我相信这行代码是你的问题的原因：

document.getElementById('pagos').innerHTML+="<br />";

没有该行的演示：http://jsfiddle.net/A7aPA/
使用该行进行演示：http://jsfiddle.net/A7aPA/1/

如您所见，第一个演示有效，第二个无效。

删除该行，它应该可以工作...