x-editable 弹出窗口未显示在正确位置答案

【问题标题】：x-editable popup does not display in correct positionx-editable 弹出窗口未显示在正确位置
【发布时间】：2014-01-24 06:34:36
【问题描述】：

我正在尝试使用 div 而不是表格，并允许用户对每个“行”进行评论。

我的 div 结构的一个例子是这样的：

<div id="mytable">
<div id="line1" class="line preformatted">
    This is my whole entire line!
    <div id="popuplink">
        <a href="#" id="popup" aria-describedby="ui-tooltip-0" onclick="addComment(event)"><i class="icon-pencil"></i></a>
    </div>
</div>
</div>

像这样定义可编辑对象：

$('#popup').editable({
    toggle: 'manual',
    mode: 'popup',
    title: 'Enter comment',
    type: 'text',
    emptytext: '',
    placement: 'right',
    display: function(value, response) {
        return false;   //disable this method
    },
    success: function(response, newValue) {
        alert("success saving: " + newValue);
    }
});

由于某种原因，x-editable 弹出窗口不会相对于正确的 div 显示，它一直默认显示在左上角。我该如何解决这个问题？

在此处查看 jsfiddle：http://jsfiddle.net/H9Drf/7/

编辑：我认为问题与每个 div 中“popup”的 id 相同。例如，如果我单击第三行，然后在文本框中写入一些内容并点击“保存”，我可以看出效果发生在第一行，其中第一次出现“id=popup”。仍然不确定从这里去哪里......

【问题讨论】：

您希望它实际显示在哪里？
@Travis 我希望它显示在行的右侧
如在文本的同一行上。

标签： javascript jquery css jquery-ui x-editable

【解决方案1】：

我不确定这是否适用于任何地方，但这应该适用于您的示例。您正在使用的插件正在添加内联样式

尝试将其添加到您的样式表中

 .editable-popup{top:-61px !important;left:245px !important;}

【讨论】：

我正在寻找一种解决方案，该解决方案将导致弹出窗口出现在每个 SELECTED 行旁边。就像，您可以单击每行中的图标，每次弹出窗口都会出现在它旁边。此解决方案仅显示一个特定行旁边的弹出窗口。我更新了 jsfiddle 以更清楚地说明我的意思：jsfiddle.net/H9Drf/7 另外，我相信第一行可以正常工作，但第二和第三行不行。仍然不知道为什么。

【解决方案2】：

如果您希望弹出窗口相对于“#line1”显示，请将其添加到 css：

#line1 {
   position: relative;
}

【讨论】：

【解决方案3】：

一旦我给不同的 x 可编辑项（我的代码中的 popuplink div 内的链接）不同的 ID，我就让它工作了。在jsfiddle.net/H9Drf/9/查看工作解决方案

【讨论】：

【解决方案4】：

我遇到了这个问题，结果证明我没有包含正确的 jquery-ui css。更改 css 版本以匹配 ui 版本已修复它。

【讨论】：