Adicionando eventos a elementos criados dinamicamente

Front-end
#1

Alguem poderia me ajudar ?

Eu criei uma tabela com um botão adicionar embaixo, que quando clicado adiciona mais linhas no final dessa tabela.

A ultima coluna dessa tabela é um botão para remover cada linha adicionada.

Se no banco tiver dois registros, ele preenche essas linhas da tabela,
mas se eu adicionar mais linhas os botões de remover das linhas adicionadas não funcionam,
somente os das linhas que já vieram na tela.

O código HTML e JavaScript estão abaixo, se alguem puder ajudar…

[code]var inIndex = ${totalCPF};

function setIndex(pNumero){
inIndex = pNumero;
}

function AdicionaCampo(element)
{
var tblTarget;
var tblRow;
var tblCol1;
var tblCol2;
var tblCol3;
var tblCol4;
var tblCol5;
var tblCol6;
var tblCol7;
var tblCol8;
var tblCol9;

inIndex++;
setIndex(inIndex);

tblTarget = document.getElementById(element);

tblRow = tblTarget.insertRow(-1); // o -1 é para inserir apos a ultima linha
				
tblCol1 = tblRow.insertCell(0);
tblCol1.innerHTML = "<select name='desEng" + inIndex + "'>        " +
					"	<option value=\"0\"> Cargo...   </option> " +
					"	<option value=\"D\"> Desenhista </option> " +
					"	<option value=\"E\"> Engenheiro </option> " +								
					"</select>";

tblCol2 = tblRow.insertCell(1);															
tblCol2.innerHTML = "<select name='elabVerifAprv" + inIndex + "'>   " +
						"<option value=\"0\"> Função...   </option> " +
						"<option value=\"E\"> Elaborador  </option> " +
						"<option value=\"V\"> Verificador </option> " +
						"<option value=\"A\"> Aprovador   </option> " +
					"</select>";

tblCol3 = tblRow.insertCell(2);
tblCol3.innerHTML = "CPF";

tblCol4 = tblRow.insertCell(3);					
tblCol4.innerHTML = "<input type='Text' name='cpf" + inIndex + "' onBlur='BuscaNome( this, fchhora_lnk.nome" + inIndex + ", fchhora_lnk.hh" + inIndex + ", fchhora_lnk.nrNip" + inIndex + ", fchhora_lnk.cdNind" + inIndex + " );' onKeyPress='MascaraCPF(this);' maxlength='14' style=' width : 123px;'>";				

tblCol5 = tblRow.insertCell(4);
tblCol5.innerHTML = "Nome";

tblCol6 = tblRow.insertCell(5);
tblCol6.innerHTML = "<input maxlength='50' size='45' name='nome" + inIndex + "' READONLY></input>";

tblCol7 = tblRow.insertCell(6);
tblCol7.innerHTML = "HH";

tblCol8 = tblRow.insertCell(7);
tblCol8.innerHTML = "<input maxlength='6' size='15' name='hh" + inIndex + "' onKeyDown='Mascara(this,Valor);' onKeyPress='Mascara(this,Valor);' onKeyUp='Mascara(this,Valor);' onBlur='SomaHH();'></input>";	

tblCol9 = tblRow.insertCell(8);
tblCol9.innerHTML = "<button type='button' onclick='RemoveCampo(element)'> REMOVER </button>";

document.getElementById( "totalCPF" ).value = inIndex;

}

function RemoveCampo(element)
{
alert( document.getElementById( “totalCPF” ).value );

if( inIndex >= 2 )
{
	inIndex--;
	setIndex(inIndex);
	
	document.getElementById( "totalCPF" ).value = inIndex;
	document.getElementById(element).deleteRow(-1);
}

}

<option value="0" selected = "true" > Cargo... <option value="D" selected = "true" > Desenhista <option value="E" selected = "true" > Engenheiro <option value="0" selected = "true" > Função... <option value="E" selected = "true" > Elaborador <option value="V" selected = "true" > Verificador <option value="A" selected = "true" > Aprovador CPF Nome HH REMOVER
ADICIONAR
[/code]
#2

É praticamente impossível ler um código não formatado.
Use a tag code para formatar seu código.

Se você puder usar jQuery, vc pode fazer algo assim:[code]var $body = $( document.body );

for ( var i = 0; i < 10; i++ ) {

// cria o elemento
var $div = $( "<div></div>" ).text( "div " + i );

// registra o manipulador de evento
$div.click(function(){
    alert( $(this).text() );
});

// insere no body
$body.append( $div );

}[/code]jsFiddle: http://jsfiddle.net/davidbuzatto/FkT8D/

#3

Eu consegui resolver da seguinte maneira: troquei a função RemoveCampo(element)

pelas duas abaixo:

[code]function Remove( linha )
{
RemoveCampo( ‘hhPessoa’, linha );
}

function RemoveCampo( element, linha )
{
if( inIndex >= 2 )
{
document.getElementById( element ).deleteRow( linha );
}
}[/code]

Não é a melhor maneira mas funcionou.

Obrigado pela ajuda David.

#4