Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

15-04-2010 16:06

Olá pessoal.
É minha primeira participação no forum e gostaria de uma ajuda no meu problema.
O que estou querendo é: Criar elementos dinamicamente e definir um evento de click nesse elemento. E quando for "Clicado" no elemento criado eu saber o value de um elemento input criado anteriormente.
Eu já tenho um código que faz alguma coisa mas ainda não esta funcionando.

function adiciona() {         $('#tabela_planos').append('<div class="linha'+contador+'" title="'+contador+'">'+                                    '<INPUT TYPE=CHECKBOX NAME="maillist"><label for="tarefas">Tarefa tanto faz ou assim assado .... '+contador+'</label>'+            '<p> Projeto teste</p>'+                            '<input class="botao" type="button" name="Realizar" id="Realizar" value="Realizar" onClick="realizar()">'+            '<input type="text" name="ident'+contador+'" id="ident'+contador+'" value="ident'+contador+'">'+            '</div>');                 $('.linha'+contador).click(function() {                 var xd = new Date();                 //$('#Del_1').val(xd + ' - ' + $('.linha:has(input[name="fname"])').val());                 //$('#Del_1').val(xd + ' - ' + $('.linha:last').val());                 //$('#Del_1').val(xd + ' - ' + $(this).attr("title"));  // esse funciona                 //alert($('input:text').val()); // pega o primeiro edit da p gina                 alert($('#ident'+contador).val());   });           contador++; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

15-04-2010 16:20

Não entendi muito bem, então fiz algo parecido

<script> $(document).ready(function() { $("#cria").click(function() { $("#base").append("<input type='button' value='abc' onclick='alert(this.value)'>"); }); }); </script>


<input type="button" id="cria" value="criar"> <div id="base"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

15-04-2010 17:11

Opa, valeu por responder.
Mas o que eu quero é que no clique do div eu pegar o value do edit que está dentro do div criado. Esse edit vai ficar oculto e com um valor para depois me orientar para fazer uma procura posterior.

Sei que é possível, mas não consigo mais exemplos assim na NET.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

15-04-2010 17:22

Deixa eu ver se entendi, você cria uma div, e coloca um input dentro dela, ai quando clicar nessa div criada, você quer que mostre um alert com o valor desse input que está na div?
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

15-04-2010 17:32

Outra coisa,
eu fiz ali no exemplo um DIV com CLASS sempre diferente. Mas isso foi pra teste.
Se der pode ser um DIV com uma classe só, pois seria melhor de fazer os efeitos no css depois.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

15-04-2010 17:54

Seria isso?

<script> $(document).ready(function() { $("#cria").click(function() { $("#base").html("<div class='div' onclick=\"alert($('.input').val())\"><input class='input' type='text' value='abc'></div>"); }); }); </script>


<input type="button" id="cria" value="criar"> <div id="base"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

16-04-2010 08:49

Tenho que criar N divs, por isso eu coloquei um APPEND. E o click deve ser responsável pelos seus próprios inputs dentro dele.

Quero agradecer pelo seu empenho em me ajudar e distribuir gratuitamente o seu conhecimento com a galera da NET. Obrigado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

16-04-2010 09:02

Então o click deve estar no input, e não na div? Se sim é possível usar o this.value para pegar o id somente daquele input.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

16-04-2010 09:10

O click eu quero colocar no div, pois eu queria deixar paracido com a lista de emails do gmail, em qualquer lugar que tu clica na linha do email você abre ele. É assim que eu estava imaginando. e como o input irá fica oculto, servindo apenas pra guardar um numero que eu iria pegar depois no click do div.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

16-04-2010 09:31

Quando criar as divs, elas poderiam ser criadas de uma em uma?
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

16-04-2010 10:09

Com certeza será uma de cada vez.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

16-04-2010 11:24

Dá uma olhada nesse exemplo com increment

<style type="text/css"> .div{border:1px solid #cccccc;} </style>


<script type="text/javascript"> $(document).ready(function() { var valor = 1; $("#cria").click(function() { $("#base").append("<div class='div' onclick=\"alert($('#input"+valor+"').val())\"><input class='input' id='input"+valor+"' type='text' value='123'></div>"); valor++; }); }); </script>


<input type="button" id="cria" value="criar"> <div id="base"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

16-04-2010 11:57

Mas bah tche, é isso aí ...
Funcionou beleza. :rofl:

Mas só tem mais uma coisa. Eu tenho um checkbox dentro desse div criado, e quando eu clico nele, entra tb. no evento do click do div, como fazer para filtar isso ?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

16-04-2010 13:06

Uma div com click é igual uma máscara que cobre os elementos que estão dentro. Acho que não dá para diferenciar dessa forma. Você poderia criar outro elemento dentro dessa div que receberia o click, e não a div toda.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 8
Localização: RS

Adicionar evento a um elemento criado dinamicamente

16-04-2010 15:11

Caro Web, quero agradecer mesmo pela sua colaboração.

Com relação ao meu problema, consegui contornar com uma função que testa se você esta clicando no evento e elemento corretos.

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script language="JavaScript" type="text/JavaScript"> function amIclicked(e, element) {     e = e || event;     var target = e.target || e.srcElement;     if(target.id==element.id)         return true;     else         return false; } function oneClick(event, element) {     if(amIclicked(event, element))     {         alert('One is clicked = ');     } } function twoClick(event, element) {     if(amIclicked(event, element))     {         alert('Two is clicked');     } }   function realizar(t) {   alert('click no botão='+t.name); } </script>   <title>JS Bin</title> <style> #one {     width: 200px;     height: 300px;     background-color: red; } #two {     width: 100px;     height: 170px;     background-color: yellow;     margin-left: 10;     margin-top: 20; } .one2 {     width: 200px;     height: 300px;     background-color: green; }     </style> </head> <body>     <div id="one" onclick="oneClick(event, this);">     one     <div id="two" onclick="twoClick(event, this);">         two           <input class="botao" type="button" name="Realizar2" id="Realizar2" value="Realizar" onClick="realizar(this)">     </div>     <input class="botao" type="button" name="Realizar" id="Realizar" value="Realizar" onClick="realizar(this)"> </div>     <div class="one2" onclick="oneClick(event, this);">     tres   </div> </body> </html>

Com isso o div tem o evento click e os botões que estão dentro dele tambem tens seus próprios eventos sem dar confusão, heheh.
Valeu mesmo. :wink:
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Adicionar evento a um elemento criado dinamicamente

16-04-2010 15:36

Boa, não conhecia :wasntme:
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]