Javascript X-可编辑引导字段仅在第一个链接上加载

我和你一起用

我在每个帖子页面上都有一个评论列表，每个评论下都有一个编辑链接

但我只能编辑最后一条评论（最新提交的评论）的第一条评论，其余的则不加载X-Editable字段

            $('#note').editable({
                validate: function(value) {
                    if($.trim(value) == '')
                        return 'Value is required.';
                },
                type: 'wysihtml5',
                title: 'Edit Comment',
                placement: 'top',
                send:'always',
                ajaxOptions: {
                    dataType: 'json',
                    type: 'post'
                }
            });
            $('#pencil').click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                $('#note').editable('toggle');
            });

还有HTML

<div id="note" 
     class="note" 
     data-type="wysihtml5" 
     data-toggle="manual" 
     data-pk="{{ $each_comment->id }}" 
     data-placement="top" 
     data-url="{{ url($each_comment->post_id . '/comment/update') }}">
    {!! $each_comment->comment !!}
</div>

<a href="#" 
   id="pencil" 
   class="pencil" 
   data-type="wysihtml5" 
   data-toggle="manual" 
   data-pk="{{ $each_comment->id }}" 
   data-placement="top" 
   data-url="{{ url($each_comment->post_id . '/comment/update') }}">
<i class="icon-pencil" style="padding-right: 5px"></i>[edit]
</a>

现在所有编辑链接都加载了X-Editable字段，但它们都显示了id为142的相同注释，这是最新提交的注释

每当我单击编辑链接时，

console.log

都会打印相同的id。

来自

$（“#注意”）。可编辑（

看起来您正在使用重复的

id

动态生成内容

id

选择器始终返回第一个匹配项，因为规则是，

id

在文档中应该是唯一的

您应该使用

类

、

名称

或允许重复的类似属性，而不是

id

因此，使用

class

时，代码应该如下所示：

$('.pencil').click(function(e) {
   e.stopPropagation();
   e.preventDefault();
   $(this).prev('.note').editable('toggle');
 });

---

如果我使用

$（'.note'）.editable（）

它将开始加载不是我的注释，其余的编辑链接打开，但它们都加载了一条不是我的注释。你的新代码段在控制台中给了我这个错误

未捕获类型错误：this.prev不是一个函数

这禁用了所有编辑链接，没有一个打开，甚至没有第一条注释。我有

data-pk是唯一的和动态的，我可以用它来代替id吗？是的，你可以使用
data-*
属性。如果你能用你的代码创建一个堆栈片段/jsfiddle或其他东西，我可能可以帮你
$('.pencil').click(function(e) {
   e.stopPropagation();
   e.preventDefault();
   $(this).prev('.note').editable('toggle');
 });