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