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/

正如您所看到的，第一个演示工作，第二个演示没有。

删除该行，它应该有用......

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

1 个答案: