How to apply .editable() to dynamically added elements

Question

I have a webpage that executes this javascript on $(document).ready(). The .editable() comes from the X-Editable javascript library (in place editing).

$('tr td:nth-child(2) a').editable();

A link/button on my page allows for the addition of rows to the table. Is there a way to perform editable() on just the new instead of using the same selector as before and having it fetch all the matches again?

$('#newCriteria').click(function () {
    var id = 0;

    // load template
    var cTemplate = $('#criteriaTemplate').html();

    // fill template
    var template = cTemplate.format(id, 'New Field');

    // attach editable (doesnt work)
    $('tr td:nth-child(2) a', template).editable();

    // append to table
    $('#criteriaTable').append(template);
});

As you can see, I thought I'd try and pass the template html through as a context to the jQuery but since it isn't actually part of the DOM until I append it, it doesn't work.

Another possible solution is that I could just modify the selector to 'tr:last-child td:nth-child(2) a' .

I was wondering if there was some why to use .on() on the element to have jQuery automatically add the handlers for me. I've only ever used .on() in the past to add handlers like .on('click', '...', function() {}) , I don't know if it can be used for things like editable().

The template:

<script type="text/template" id="criteriaTemplate">
        <tr data-criteriaID='{0}'>
            <td><i class="icon-remove" /></td>
            <td><a href="#">{1}</a></td>
            <td><a href="#" data-value="0">String</a></td>
        </tr>
    </script>

Answer 1

x-editable has a selector option, so you can apply .editable to table tag:

$('#table').editable({
  ...
  selector: 'tr td:nth-child(2) a'
});