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在document中應該是唯一的。

您應該使用允許重復的class ， name或類似屬性，而不是id 。

因此，使用class的代碼應類似於以下內容：

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