2

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

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

我页面上的链接/按钮允许向表中添加行。有没有办法只对 new 执行 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() {})，我不知道它是否可以用于诸如可编辑（）之类的东西。

模板：

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

1 回答 1

2

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

$('#table').editable({
  ...
  selector: 'tr td:nth-child(2) a'
});
于 2013-06-01T10:53:02.700 回答