Ir para conteúdo
junior almeida

problema com click jquery

Recommended Posts

tenho o seguinte codigo

<head>
<script type="text/javascript">
        $.ajax({
            url: 'livros.json',
            dataType: 'json',
            type: 'get',
            cache: false,
            success: function(data){
                $.each(data, function(i, item){
                    console.log(item.name);
                    $("#lista").append("<li><a id='livro'>"+item.name+"</a></li>");
                });
            }
        });
    </script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div id="wrapper">
        <ul id="lista">
            
        </ul>        
    </div>
</body>

 

ate ai tudo bem ele me lista os dados que estão no json

 

ai queria pegar o click nos items listados ai estou usando esse codigo

 

$(document).ready(function(){
    $('#livro').click(function(){
        console.log("clicou");
    });
})

 

só que ele não me retorna nada, se alguém puder me ajudar 

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, junior almeida disse:

$(document).ready(function(){ $('#livro').click(function(){ console.log("clicou"); }); })

 

Você tem que ter algum elemento html com o ID livro para funcionar.

 

No HTML que mostrou aí só tem os elementos ID wrapper e lista

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ou dessa forma também resolve.

$("#lista").on("click", "#livro", function(){
	let $a = $(this);
  	console.log($li.html());
})

Ali eu acessei o .html() do elemento clicado, mas você pode acessar ou modificar qualquer outro atributo do elemento.

 

Segue dois artigos sobre event delegate, um com jQuery e outro com JS puro.

https://tableless.com.br/entendendo-o-event-delegation-jquery/

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

No script que postei acima o correto é assim:

$("#lista").on("click", "#livro", function(){
	let $a = $(this);
  	console.log($a.html());
})

Compartilhar este post


Link para o post
Compartilhar em outros sites
14 horas atrás, bross lightyear disse:

Acredito que o problema esteja no id ser repetido, tenta colocar classe .livro e utilize tipo.


 $('.livro').click(function(){
        console.log("clicou");
    });

o id livro ele não se repete ate tentei colocar outro id mas mesmo assim não foi

13 horas atrás, Wesley Santos disse:

Ou dessa forma também resolve.


$("#lista").on("click", "#livro", function(){
	let $a = $(this);
  	console.log($li.html());
})

Ali eu acessei o .html() do elemento clicado, mas você pode acessar ou modificar qualquer outro atributo do elemento.

 

Segue dois artigos sobre event delegate, um com jQuery e outro com JS puro.

https://tableless.com.br/entendendo-o-event-delegation-jquery/

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

No script que postei acima o correto é assim:


$("#lista").on("click", "#livro", function(){
	let $a = $(this);
  	console.log($a.html());
})

dessa maneira também não esta funcionando, dei uma lida nos artigos mas eles não me ajudaram a resolver o problema

Compartilhar este post


Link para o post
Compartilhar em outros sites

<ul>
<li><a class='livro'>teste</a></li>
<li><a class='livro'>testexxxx</a></li>
</ul>


<script type="text/javascript">
    
    $(document).ready(function(){
    $('.livro').click(function(){
        alert($(this).html());
       
    });
})
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites
6 minutos atrás, bross lightyear disse:

<ul>
<li><a class='livro'>teste</a></li>
<li><a class='livro'>testexxxx</a></li>
</ul>


<script type="text/javascript">
    
    $(document).ready(function(){
    $('.livro').click(function(){
        alert($(this).html());
       
    });
})
</script>

dessa maneira ele funciona só que o problema é que meus elementos são criados pelo jquery com o append ai não consigo pegar o click dos elementos criado dinamicamente

Compartilhar este post


Link para o post
Compartilhar em outros sites

trocar o append

   $("#lista").append("<li><a class='livro'>"+item.name+"</a></li>")

e trocar 

 

<script type="text/javascript">
    
    $(document).ready(function(){
    $('.livro').click(function(){
        alert($(this).html());
       
    });
})
</script>

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 Rogerio Pancini
      Boa noite pessoal.
       
      Há duas partes de uma tela que estão prontas, funcionando, mas não corretamente.
      Nessa parte, faço um cálculo.
      Sem a máscara de Real, ótimo.
      Se coloco a máscara 'valor'no input, retorna NaN.
       
      /****** maskMoney ******/ $(function(){ $(".valor").maskMoney({symbol:'R$ ', showSymbol:true, thousands:'.', decimal:',', symbolStay: true}); }) /****** Função percentual ******/ function funcao_percentual(valor_1, destino, percentual) { $(valor_1).on("click", function() { $(destino).val(''); }); function arredondar(valor,casas){ var novo = Math.round(valor*Math.pow(10,casas))/Math.pow(10,casas); return(novo); } $(valor_1).blur(function() { valor = $(this).val(); porcentagem = percentual; // PORCENTAGEM A SER ADICIONADA total = (parseFloat((valor*porcentagem)/100)); $(destino).val(arredondar(total, 2)); }); } /****** Função subtrair ******/ function funcao_subtrair(valor_1, valor_2, inicio, destino) { $(inicio).on("click", function() { $(destino).val(''); }); function arredondar(valor,casas){ var novo = Math.round(valor*Math.pow(10,casas))/Math.pow(10,casas); return(novo); } $(inicio).blur(function() { valor_1_v = $(valor_1).val(); valor_2_v = $(valor_2).val(); total = (parseFloat((valor_1_v-valor_2_v))); $(destino).val(arredondar(total, 2)); }); } /****** Percentual de Provisão - Royalties (franchising) ******/ funcao_percentual("#valor", "#provisao_royalties_franchising", 39.85) /****** Percentual de Provisão Fundo Propaganda ******/ funcao_percentual("#valor", "#provisao_fundo_propaganda", 3) /****** Subtração de Provisão - Royalties ( franchising) ******/ funcao_subtrair("#provisao_royalties_franchising", "#provisao_fundo_propaganda", "#valor", "#provisao_royalties_franchising_2") E o outro BO é quando somo datas. Dá um resultado que não tem nada haver com a planilha que tenho de modelo:
       
      /****** Função calcular a data ******/ function funcao_calcular_data(data_inicial, data_final, dias) { $(data_inicial).blur(function() { $(data_inicial).on("click", function() { $(data_final).val(''); }); var data_ini = $(data_inicial).val(); var date = new Date(data_ini); date.setDate(date.getDate() + dias); var futDate=date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear(); $(data_final).val(futDate); }); } /****** 1º vencimento ******/ funcao_calcular_data("#data_emissao", "#1_venc", 28) /****** 2º vencimento ******/ funcao_calcular_data("#data_emissao", "#2_venc", 42) /****** 3º vencimento ******/ funcao_calcular_data("#data_emissao", "#3_venc", 56) Se alguém puder colaborar com alguma luz.
      Confesso que preciso melhorar ainda mais em Jquery, mas essas funções ficaram boas para a necessidade.
      Faltam apenas esses ajustes.
       
      Obrigado!
    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
    • Por igoraraujowd
      Pessoal,
       
      Estou trabalhando em um teste A/B e preciso fazer uma modificação no código do menu. Estou utilizando o Mega Site Menu e preciso que o site fique sempre com o hamburger menu ainda que em desktop.
      https://codyhouse.co/gem/css-mega-site-navigation
       
      Pra fazer isso, eu precisaria fazer 2 alterações no código abaixo:
      https://ghostbin.com/paste/fjy3t
      1 - Alterar o valor da variável MqL
      2 - Anular as linhas abaixo na função moveNavigation:
      //navigation.insertBefore('.menu--mobile-header-cta'); //$('.nav-overlay').removeClass('is-visible'); A questão é que eu não posso fazer essas alterações diretamente no código e precisaria inserir algo em tags <script> que sobscrevesse a função e alterasse os pontos acima. É possível?
    • 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
×

Informação importante

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