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

I'm using Bootstrap X-Editable along with bootstrap-wysihtml5.

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

I have a comment list on every post page with an edit link under each comment.

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

But I can only edit the first comment on the last (the newest submitted comment) and the rest simply don't load the X-Editable field.

但我只能编辑最后一条评论(最新提交的评论),其余的只是不加载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');
            });

And the HTML

和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>

UPDATE

I made some changes, I added a pen class to the edit link

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

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

And I call it with a.pen

我用a.pen来称呼它

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

Now all edit links are loading the X-Editable field but they're all showing the same comment with id 142 which is the latest submitted comment.

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

console.log prints the same id whenever I click on the edit link.

每当我点击编辑链接时,console.log都会输出相同的ID。

1 个解决方案

#1

From $('#note').editable( it looks like you're dynamically generating content with duplicate id.

来自$('#note')。editable(看起来你动态生成带有重复ID的内容。

id selector always returns the first match because the rule is, id should be unique in a document .

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

You should be using class, name or similar attributes that is allowed to be repeated instead of id.

您应该使用允许重复而不是id的类,名称或类似属性。

So using class the code should be something like following:

所以使用类代码应该是这样的:

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

#1