link is not called

7

I have a jQuery code that generates a div it works quietly, 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 of another button by clicking this link

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

But when I click on the link nothing happens, its put the link in the html rather than put by the append (div) it calls the event.

Does anyone know what's going on, and is it better to arrange?

    
asked by anonymous 02.12.2015 / 13:08

5 answers

3

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

As a workaround you should create the click event shortly after adding the div to 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>
    
02.12.2015 / 13:09
4

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

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

    
02.12.2015 / 13:17
1

Friend, you can call the .click () method directly, you do not need the trigger.

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

If it does not work, check to see if $ ("# bundle_ad_submit") exists even if it is able to find this object and if it has an event attached to it.     

02.12.2015 / 13:16
1

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

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

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><templateid="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 () { ... }) that will work, however it is recommended to use the nearest parent instead of document

    
02.12.2015 / 13:44
0

I would use the following snippet:

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

Why would the event on, "hear" the DOM and see when it was loaded.

    
03.12.2015 / 13:21