link is not called

Question

I have a code jQuery that generates a div it works smoothly, in it I have the following excerpt

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

then I add this div and it appears on the right screen, but my problem is that I wanted to call the event another button by clicking this link

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

however when I click on the link nothing happens, if you put the link in html instead of put by append(div) it calls the event.

Somebody knows what’s going on, it’s better to fix it?

Answer 1

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

This is because the DOM has already been loaded, you need the event ON to listen to page changes.

Answer 2

This is because you are not assigning the event click element before it exists in HTML.

As a solution you should create the click event right after adding the div to the 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>

Answer 3

Buddy, you can call the method . direct click() you don’t need Trigger.

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

If it doesn’t work, check if $("#bundle_ad_submit") does exist, if it can find that object and if it has an event attached to it.

Answer 4

As @Pedrocamarajunior pointed out, you are trying to associate an event before it exists, in this case the ideal is to use the method on() in any relative closer to this element and pass a selector of this element as parameter.

Below is a short example of how to dynamically add content to the page and not have problems with the event bind.

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>

You can even use $(document).on("click", #link_new_ad", function () { ... }) which will work, but the recommended is to use the parent closer than document

Answer 5

I would use the following excerpt:

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

Why so the event on, "would hear" the GIFT and see when it was born.