7

Tenho um codigo jQuery que gera uma div ele funciona tranquilamente, nele tenho o seguinte trecho

div += "<p>Coloque o seu <a class='text-orange' id='link_new_ad'>veículo a disposição</a>!</p>";

depois eu adiciono essa div e ela aparece na tela certinho, porem meu problema é que queria chamar o evento de outro botão ao clicar nesse link

$("#link_new_ad").click(function (){
    alert('teste');
    $("#bundle_ad_submit").trigger('click');
});

porem quando clico no link nada acontece, seu colocar o link no html em vez de colocar pelo append(div) ele chama o evento.

Alguem sabe o que ta acontecendo, e melhor como concertar?

5 Respostas 5

4

Use $(seuelemento).on("click", function() {})

Isso ocorre porque o DOM já foi carregado, você precisa do evento ON para ficar ouvindo as mudanças da página.

7
  • mano pode crer o que tu disse, mas por algum motivo não funcionou a respoda @pedro-camara-junior funcionou. Commented 2/12/2015 às 12:49
  • Rodrigo, fiz um teste com o ondiretamente no console do navegador mas não consegui fazer funcionar, consegue postar um exemplo talvez? Commented 2/12/2015 às 12:51
  • 2
    @Rodrigo, você está aplicando o evento on() em um elemento que ainda não existe, isto não vai monitorar a inclusão do mesmo. Commented 2/12/2015 às 12:52
  • Há outra sintaxe, tente $('body').on("click", "seuelemento", function() {}) Commented 2/12/2015 às 12:54
  • api.jquery.com/on Commented 2/12/2015 às 12:54
3

Isso ocorre pois no você está atribuindo o evento click ao elemento antes de ele existir no HTML.

Como solução você deve criar o evento do click logo após adicionar a div ao HTML.

$(document).ready(function() {
  var html = "<p>Coloque o seu <a class='text-orange' id='link_new_ad'>veículo a disposição</a>!</p>";
  $('body').html(html);
  //Após adicionar no HTML atribua o evento ao link.
  $("#link_new_ad").click(function() {
    console.log('teste');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5
  • Mas então adiciono a div em uma função apos uma chamada assincrona ajax. Você ta dizendo para adicionar o evento do click dentro dessa função? Commented 2/12/2015 às 12:46
  • Pode crer deu certo, valeu cara vou por sua resposta como a certa. Commented 2/12/2015 às 12:48
  • Isso mesmo. Tentou utilizando o oncitado pelo @RodrigoMello? Commented 2/12/2015 às 12:50
  • tentei mas não funcionou, mas ai quando coloquei a chamada dentro da função ai funcionou. Commented 2/12/2015 às 12:51
  • @MarciusLeandro No teu caso acho melhor utilizar o on da maneira citada pelo @TobyMosque Commented 2/12/2015 às 13:05
1

Amigão, vc pode chamar o metodo .click() direto, não precisa do trigger.

$("#link_new_ad").click(function(){
    alert('teste');
    $("#bundle_ad_submit").click();
});

Se nao funcionar, verifica se o $("#bundle_ad_submit") existe mesmo, se ele esta conseguindo achar esse objeto e se tem evento atachado nele.

1

Como o @PedroCamaraJunior apontou, você está tentando associar um evento antes que ele exista, neste caso o ideal é usar o metódo on() em algum parente mais próximo deste elemento e passar um seletor deste elemento como parâmetro.

Abaixo segue um pequeno exemplo de como adicionar conteúdo dinamicamente a pagina e não ter problemas com o bind dos eventos.

var tmplCarro = document.getElementById("tmplCarro").content;
var container = $("#container");
var addCarro = $("#addCarro");

addCarro.on("click", function () {
  var carro = $(document.importNode(tmplCarro, true));
  container.append(carro);
});

container.on("click", ".enviar", function (event) {
  var enviar = $(this);
  var linha = enviar.parent(".linha");
  var carro = $(".carro", linha);
  alert("Enviando Carro: " + carro.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<template id="tmplCarro">
  <div class="linha">
    <label> Carro:
      <input class="carro" type="text" />
    </label>
    <input class="enviar" type="button" value="Enviar" />
  </div>
</template>

<input id="addCarro" type="button" value="Adicionar Carro" />
<div id="container">

</div>

Você até pode usar $(document).on("click", #link_new_ad", function () { ... }) que irá funcionar, porém o recomendado é utilizar o parent mais próximo ao invés de document

1
0

Eu utilizaria o seguinte trecho:

$("#link_new_ad").on('click', '#bundle_ad_submit', function()
{
     alert('teste');
})

Por que assim o evento on, "ouviria" o DOM e veria quando ele fosse carregado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .