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

X-Editable Bootstrap field loads only on the first link

本文关键字：链接 加载 第一个 Bootstrap 字段 X-Editable      更新时间：2023-09-26

我使用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每当我点击编辑链接

从$('#note').editable(，它看起来像你动态生成内容与复制id。

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

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

所以使用class代码应该像下面这样:

$('.pencil').click(function(e) {
   e.stopPropagation();
   e.preventDefault();
   $(this).prev('.note').editable('toggle');
 });
相关文章：