X-Editable Bootstrap 字段仅在第一个链接上加载

Question

我正在使用Bootstrap X-Editable 和bootstrap-wysihtml5。

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

但我只能在最后一条（最新提交的评论）上编辑第一条评论，其余的根本不加载 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>

更新

我做了一些更改，我在编辑链接中添加了一个pen 类

<a href="#" id="pencil" class="pen" data-pk="{{ $each_comment->id }}">[edit]</a>

我用a.pen调用它

('a.pen').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    console.log($('#note').attr("data-pk"));
    $('#note').editable('toggle');
});

现在所有编辑链接都在加载 X-Editable 字段，但它们都显示相同的评论，ID 142 是最新提交的评论。

console.log 在我点击编辑链接时打印相同的 id。

Answer 1

从$('#note').editable( 看来，您正在动态生成具有重复id 的内容。

id 选择器总是返回第一个匹配项，因为规则是，id 在文档中应该是唯一的。

您应该使用class、name 或允许重复的类似属性，而不是id。

所以使用class 代码应该如下所示：

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