javascript - 如何将 .editable() 应用于动态添加的元素

Question

我有一个在 $(document).ready() 上执行此 javascript 的网页。 .editable() 来自X-Editable javascript library (就地编辑)。

$('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 的一部分，因此它不起作用。

另一个可能的解决方案是我可以将选择器修改为 'tr:last-child td:nth-child(2) a'。

我想知道是否有一些原因要在元素上使用 .on() 来让 jQuery 自动为我添加处理程序。我过去只使用过 .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>

Answer 1

x-editable 有一个 selector 选项，因此您可以将 .editable 应用于表格标签:

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