onClick em DIV construída com DOM

[FabianoSouza 5]

Costumo usar DOM para criar alguns elementos.

O problema é quando preciso setar algum atributo do elemento (onClick, por exemplo) com uma function.

A function acaba sendo executada quando o elemento é criado.

 

Exemplo

	//Cria DIV container assistente
	var divAssistente = document.createElement("div")
	var addDiv = document.getElementById(container).appendChild(divAssistente);
	addDiv.setAttribute('onclick','abreMsg()');

A function abreMsg() acaba sendo executada enquanto a DIV é criada pelo JS.

 

Como evito isso?

[William Bruno 1501]

Cara, a solução ideal é uma técnica chamada "delegate".

Leia:

http://wbruno.com.br/javascript-puro/delegate-events-no-javascript/

[FabianoSouza 5]

Putz, era só fazer isso

addDiv.onclick = abreMsg;

Valeu, William.

[FabianoSouza 5]

Ops, funcionou num protótipo.

Mas na produção a coisa roda dentro de um loop. Não funfa.

 

William, tem um exemplo mais básico sobre delegate? Nem manjo do Prototype.

 

Meu caso é isso.

	for( var i = 0; i < lista.length; i++ )
	{
//Construo uma DIV e atribuo um ID a ela
}

Como seto o evento onClick dessa DIV criada?

Precisaria que ao clicar sobre ela fosse retornado seu ID

 

To procurando o que sugeriu.

Mas se tiver algo posta aí, por favor.

 

Valew!

[William Bruno 1501]

Ixi cara, mas vc entendeu qual o objetivo do delegate ?

 

Com ele, vc não precisa colocar o evento em elemento por elemento.

E ai que está a mágica, vc não tem que se preocupar se um novo elemento entrar.

 

É só dar o evento no elemento pai, e se aproveitar do event.target e da propagação do evento para ver quem foi o alvo.

[FabianoSouza 5]

Olá Wiiliam, sakei sim o conceito.

Minha dificuldade é implementar com JS puro.

 

Esse trecho é meu loop

	for( var i = 0; i < lista.length; i++ )
	{
	{

	//Cria DIV container para linha do menu
	var divContainer = document.createElement("div")
	var addDiv = document.getElementById("div_menu").appendChild(divContainer);
	addDiv.setAttribute('id',(lista[i].servico));
	addDiv.setAttribute('class','menuLtLinha');
}
}

Preciso que essa function que cria a DIV passe o evento onClick para de outra function o trabalho de recuperar o ID da DIV clicada.

[William Bruno 1501]

Apesar de existir uma lib chamada prototype(por meras razões comerciais).

 

Aquilo lá é javascript puro :lol:

O que vc tem q fazer é escutar o evento click de algum elemento pai, q não será alterado.

 

Pode ser do próprio body.

Veja:

document.body.addEventListener('click', function(event){
   console.log(event.target);
});

quando vc clicar no seu elemento criado com js, esse console.log será disparado, por causa da propagação do evento.

Os prototypes que escrevi, foram só para simplificar o uso do delegate.

[Vitor Hugo Fadel 1]

Só lembrando que o delegate() e o live() já estão em desuso, se você estiver usando o JQuery 1.7 use o on().