Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

:Charles:

[Resolvido] Eventos de um objeto criado via document.createElement ();

Por , em Javascript

Recommended Posts

:Charles:    0

:Charles:
Postado

Galera, dei uma procurada no fórum e não achei algo a respeito.

 

Minha dúvida é a seguinte:

 

Tenho inputs e selects que mudam de cor (alterando o nome da classe) quando ganha e quando perde o foco (eventos onblur e onfocus).

Tenho um link que, via javascript, insere mais campos no formulário (é um formulário de pedidos online, coisa e tal).

O problema é que para os campos que já vêm inicialmente na página, antes do javascript, eu coloco no select onfocus="this.className='nome_da_classe_over'", mas o javascript de add campos cria o select via document.createElement ( 'select' ), e aí eu não consigo fazer...

 

Colei um pedaço do código, abaixo, pra ver se alguém consegue me ajudar.

Valeuzão mesmo.

 

// ESSE FUNCIONA, NO HTML
	<select class="input2" onfocus="this.className='input2_over'" onblur="this.className='input2'">
		<option>options</option>
	</select>
	
// JÁ ESSE, NÃO
	comboDim = document.createElement ( 'select' );
	
	// TINHA PENSADO EM ALGO ASSIM, MAS NADA QUE EU TENTEI FUNCIONOU
	comboDim.onFocus = comboDim.setAttribute ( 'class', 'input2_over' );

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado 

var corpo = document.getElementsByTagName("body");
comboDim = document.createElement ( "select" );
comboDim.setAttribute("id","teste");
corpo.appendChild(comboDim);

document.getElementById("teste").setAttribute("onFocus", "this.className='nome_da_classe_over");

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

:Charles:    0

:Charles:
Postado 

var corpo = document.getElementsByTagName("body");
comboDim = document.createElement ( "select" );
comboDim.setAttribute("id","teste");
corpo.appendChild(comboDim);

document.getElementById("teste").setAttribute("onFocus", "this.className='nome_da_classe_over");

Abraços...

Cara, funfou no FF, mas no IE não... e o cliente usa IE :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado

Testa isso aki e ve se vai..

 

<script>
function cria()
{
var corpo = document.getElementsByTagName("body").item(0);
comboDim = document.createElement ("select");
comboDim.setAttribute("id","teste");
comboDim.onclick = function() { alert('Lalalalal');};
corpo.appendChild(comboDim);

}
</script>

<body>
<a href = "#" onClick = "cria(); return false"> Click Me! </a>
</body>

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

:Charles:    0

:Charles:
Postado

CARA!!!!!

 

Vontade de me bater agora... eu já tinha tentado isso! Só que ao invés de colocar: comboDim.onblur = function () { ... }, eu tinha colocado comboDim.onblur = new function () { ... }, manja? :P

 

Aí não funcionava!

 

Agora deu certo.

Valeuzão :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luann Francisco    0

Luann Francisco
Postado

Testa isso aki e ve se vai..

 

<script>
function cria()
{
var corpo = document.getElementsByTagName("body").item(0);
comboDim = document.createElement ("select");
comboDim.setAttribute("id","teste");
comboDim.onclick = function() { alert('Lalalalal');};
corpo.appendChild(comboDim);

}
</script>

<body>
<a href = "#" onClick = "cria(); return false"> Click Me! </a>
</body>

 

Abraços...

 

cara...até que este código funciona...mas o que acontece é que o navegador fica confuso com os 'id's' que estão sendo atribuidos para os elementos.

No seu caso,o alert() sempre vai funcionar em qualquer botão..mas a função só referencia mesmo o último botão criado, por causa do id.

Estou com um problema parecido, mas tipo eu preciso que cada objeto mude de classe quando 'mouseover' e 'mouseout', então se eu usar o codigo da maneira que você descreveu, ele muda a classe só do utimo.

eu tentei fazer um looping for e atribuindo o valor do do looping para cada id, mas mesmo assim continua pegando só o utimo valor.

 

var iden = 'b' + i;

div.setAttribute('id',iden);

div.onmouseover = function(){mudaclasse(iden,'tabelaclienteindividualon');};

div.onmouseout = function(){mudaclasse(iden,'tabelaclienteindividualoff');};

 

 

este é o codigo que eu coloquei no meio da minha função gigantesca..rss

mas o que acontece é que este evento só pega o último valor de id e atribui para todos os objetos..

OBS: a funçaõ muda classe eu criei para facilitar a mudança de classe em varios objetos da pagina. Passo como argumento o id e o nome da classe.

mudaclasse(id,classe);

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luann Francisco    0

Luann Francisco
Postado

Aí galera! :P

para quem teve esta mesma dúvida, a forma mais correta (não sei se segue o padrão W3C) de criar um elemento dinâmico em javascript é fazendo da seguinte forma:

 

var div = document.createElement('div'); //primeiro deve-se criar o elemento

 

div.className = 'bucinoff'; //Para personalizar eu adiciono uma classe css no objeto criado

 

div.setAttribute('onMouseOver','this.className = "bucinon"'); //depois eu defino o atributo do evento, e como valor deve-se usar o 'this'.

 

div.setAttribute('onMouseOut','this.className = "bucinoff"');

 

desta forma eu consegui usar em um looping for sem problemas de id.

Abraço a todos

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito