Question

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

我的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/

编辑：我认为问题与＆＃34; popup＆＃34;的ID有关。在每个div中都是一样的。就像在，如果我点击第三行，并在文本框中写入内容并点击＆＃34;保存＆＃34;，我可以看出效果发生在第一行，第一次出现＆＃34; ID =弹出＆＃34 ;.还不确定从哪里开始...

Answer 1

我不确定这会无处不在，但这应该适用于你的例子。您正在使用的插件是添加内联样式

尝试将此添加到您的样式表

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

Answer 2

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

#line1 {
   position: relative;
}

Answer 3

一旦我将不同的x-editable项目（我的代码中的popuplink divs内的链接）提供了不同的ID，我就开始工作了。请参阅jsfiddle.net/H9Drf/9 /

中的工作解决方案

x-editable popup无法显示在正确的位置

3 个答案: