jquery .on('click', func) function not doing its job

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)

Answer 2

.on() can also behave like .delegate() which is used like this:

//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1
$('#p1').on('click', '.link', function(e) {
    e.preventDefault();
    $("#out").append("clicked<br/>");
});

Here's documentation for .on(): http://api.jquery.com/on