javascript - 動的に追加された要素に .editable() を適用する方法

Question

$(document).ready() でこの JavaScript を実行する Web ページがあります。.editable() は、X-Editable JavaScript ライブラリ(インプレース編集) から取得されます。

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

私のページのリンク/ボタンを使用すると、テーブルに行を追加できます。以前と同じセレクターを使用してすべての一致を再度フェッチする代わりに、新しいものだけで editable() を実行する方法はありますか?

$('#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);
});

ご覧のとおり、テンプレート html をコンテキストとして jQuery に渡そうと思いましたが、追加するまで実際には DOM の一部ではないため、機能しません。

もう1つの考えられる解決策は、セレクターをに変更すること'tr:last-child td:nth-child(2) a'です。

要素で .on() を使用して、jQuery に自動的にハンドラーを追加させる理由があるかどうか疑問に思っていました。過去に .on() を使用して .on() などのハンドラーを追加したこと.on('click', '...', function() {})はありますが、editable() などに使用できるかどうかはわかりません。

テンプレート:

<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>