jEditable-使用图标触发对表行中所有单元格的编辑

Question

我使用jquery DataTables和jEditable来允许对表数据的每个单元格进行内联编辑，只需单击该单元格上的文本即可。 但是，我担心用户可能不知道他们需要做什么才能编辑数据，因此我希望使用编辑图标作为触发器，我为每个可编辑对象创建了一个定制事件“ edit”：

// Normal text field
    $('.textfield').editable('@(Url.Action("Edit", "Home"))',
    {
        indicator: 'saving...',
        event: 'edit',
        tooltip: 'Double click to edit...',
        style: 'inherit'

    })

然后我将图标绑定为事件的触发器：

$("#trigger").bind("click", function () {
        $(this).prevAll().each(function () {
            $(this).trigger('edit');
        });
    });

但是我有一个奇怪的行为，一旦我单击该图标，该行中的所有单元格都似乎是可编辑的，但日期选择器也会自动弹出。 此外，某些单元格然后将跳回普通文本字段，整个过程就像一团糟。.任何想法我该怎么办？ 非常感谢您的帮助。

Answer 1

因为您没有发布HTML，所以我假设您在每个.textfield之后都有一个编辑按钮。 在这种情况下，您只想在一个可编辑元素上触发edit事件，而不是在它前面的所有元素上触发（按DOM顺序）。

$("#trigger").bind("click", function () {
    $(this).prev().trigger('edit');
});