Question

How to create the issue:

1. click on existing trigger links – something happens (pass)
2. click on the “add trigger” button, which appends a new trigger link w/ same class
3. click on the newly created link, and it does not do the same thing as the 1st 2 links that existed from the start (fail)

Here is my example -: http://jsbin.com/equjig/3/edit

I thought the .on('click', func) function was good for adding events to current elements in the dom, but also for future elements that get added to the dom?

Here is my current javascript :

$(document).ready(function() {
  $(".link").on('click', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
  });

  $("#b1").on('click', function() {
    $("#p1").append("<a href='#' class='link'>new trigger</a>");
  });

here is the HTML

<button type="button" id="b1">add trigger</button>
  <p id="p1">
    <a href="#" class="link">trigger 1</a>
    <a href="#" class="link">trigger 2</a>
  </p>
  <div id="out"></div>

Note – im using jQuery 1.7

Thanks!

Answer 1

You are almost there with on …

working example : http://jsbin.com/equjig/6/edit

$(document).ready(function() {
    $('#p1').on('click','.link', function(e) {
        e.preventDefault();
        $("#out").append("clicked<br/>");
    });
});

This will work – you should select a parent div of the .link elements (i have used $('#p1') here, like in your jsbin)