Ir para conteúdo
halfar

jquery - evento clique numa div aninhada

Recommended Posts

eu tenho uma div que ao clicar nela  chama uma função através do jquery....

bem, até aqui tudo bem, está tudo funcionando normal.

 

no entanto, precisei mudar o layout, de formas que esta div teve que ficar dentro de outra div, ela ficou portanto aninhada a outra div,  e agora quando clico nela nada acontece.

 

então o evento jquery que dispara o clique está assim:

Citar

$(".nome_div").click(function(){

 

como esta div está dentro de outra div, será que eu não teria que fazer alguma referência a  div PAI??

se for este o caso, como fazer??

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não. Provavelmente exite alguma outra função que esteja vinculada a div PAI e ainda não foi encerrada.

Ou alguma outra função delimita as instruções da div PAI, assim sendo todo seu conteúdo é a div PAI

Portanto todo função para elementos internos não vão disparar.

 

Veja um exemplo:

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-3.2.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.move-a-caixa').click(function () {
                    $('.caixa1').appendTo('.caixa2');
                });
            });
        </script>
        <style>
            .caixa1 {
                background-color: #ff0000;
                width: 200px;
                height: 200px
            }
            .caixa2 { 
                background-color: #000000;
                width: 200px;
                height: 200px;
                padding: 20px
            }
            .move-a-caixa {
                padding: 10px 18px;
                background-color: #929292;
                border: none;
                cursor: pointer
            }
            .move-a-caixa:hover {
                background-color: #0080ff
            }
        </style>
    </head>
    <body>
        <div class="caixa1"></div>
        <div class="caixa2"></div>
        <br/>
        <button class="move-a-caixa">Clique para mover</button>
    </body>
</html>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por dieef5
      Boa noite pessoal,
       
      Estou com um problema e gostaria da ajuda dos amigos:
      Em uma página de escolha de forma de pagamento gostaria de fazer aparecer uma div que está oculta quando seleciono a opção pelo radio button.
      Funciona ok clicando direto no radio button, porém o radio button também é selecionado ao clicar sobre o nome da opção na DIV (exemplo: Boleto Bancário). E quando clico sobre o nome da opção a DIV oculta não aparece.
       
      Gostaria de exibir a DIV oculta tanto ao clicar sobre o nome Boleto bancário como ao clicar no radio button.
       
      o html é mais ou menos assim:
      <div class="selection row"> <div class="col-xs-6 text-left"><strong>Boleto Bancário</strong> 10% de Desconto</div> <div class="col-xs-6 text-right"><input type="radio" name="payment" value="boleto" checked="checked" /></div> </div> <div id="campos"> Exibe instrução <div  
      Meu jquery está assim:
      $("input[name=payment]").change(function(data){ var selection = $("input[name=payment]:checked").val(); console.log(selection); if(selection != "boleto") $("#campos").hide(); else $("#campos").show('fast'); }); $("#campos").hide();  
      VLw pessoal..
       
    • Por sacjamm
      Boa tarde amigos,
      Estou montando uma lógica para um site de vídeos, só que não sei como proceder com PHP.
      O site funciona com assinatura, o usuário se cadastra e cria assinatura, se a assinatura dele estiver paga, ele é um assinante.
      Tenho uma tabela de vídeos no banco de dados que tem os campos de privacidade, e seta se o vídeo é público ou privado, tem um outro campo que seta se o vídeo será mostrado para usuário assinante ou não, com essa informação, como eu devo proceder com essas condições abaixo?
      A ideia é que se a lógica for verdadeira, o usuário, pode assistir os vídeos, se for falso, ele vai ver imagem com link para fazer assinatura.
      USUARIO NAO LOGADO:
      Assiste: Videos Publicos e Postado para não assinantes
      Enxerga: Ele vai enxergar os videos para assinantes porem com a tela black de proteção chamando pra assinar
      USUARIO LOGADO E NAO ASSINANTE OU COM ASSINATURA PENDENTE OU CANCELADA
      Assiste: Videos Publicos e Postado para não assinantes e os Próprios videos que ele posta
      Enxerga: Ele vai enxergar os videos para assinantes de outros pessoas porem com a tela black de proteção
      USUARIO LOGADO E ASSINATURA ATIVA E PAGA
      Assiste: Ele Assiste Públicos e Privado de Todo mundo
      Enxerga: Ve tudo menos os videos que cada usuario colocou como privacy.
       
      Vejam: http://play.hdclipsbr.com
    • Por ghlevin
      Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php
       
      head.php original:
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links):
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte:
      Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
    • Por raphaelgs
      não estou conseguindo encaixar a logica para fazer a soma dar sem NaN
      sendo que o campo do aluguel esta com o value vazio porque estou simulando caso o usuário não tenha aluguel.
       
      segue abaixo meu código
      <p class="campo1"><span>Mensalidade Faculdade: </span>R$<input id="mensalidade" value="10"></p> <p class="campo1"><span>Aluguel: </span>R$<input id="aluguel" value=""></p> <p class="campo1"><span>Água: </span>R$<input id="agua" value="30"></p> <p class="campo1"><span>Luz: </span>R$<input id="luz" value="10"></p> <script type="text/javascript">     function despesas(){         var mensalidade = document.getElementById("mensalidade").value;         var aluguel = document.getElementById("aluguel").value;         var agua = document.getElementById("agua").value;         var luz = document.getElementById("luz").value;                  var total = parseInt(mensalidade) + parseInt(aluguel) + parseInt(agua) + parseInt(luz);         document.getElementById("resultado").innerHTML = total;     } </script>
    • Por Diones Diego Elaine
      preciso inserir o valor de uma consulta jquery dentro de um input html.
      if (!("erro" in dados)) { $("#bairro").val(dados.bairro); $("#cidade").val(dados.localidade); $("#uf").val(dados.uf); } //end if. preciso que o valor do apareça dentro do input 
      <input disabled type="text" name="uf" id="uf" class="input-text required-entry" required="" value="" > preciso passar esse value para um script php via post para poder registrar no bd.
       
      agradeço  quem puder ajudar...
×

Informação importante

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