x-editable不可點擊從列表的第二個條目到最後

Question

我正在使用x-editable作爲引導程序3，它工作的很好，但僅適用於第一行中的元素。

我有一個MySQL這種結構：

ID/img_name /名稱/描述/畫廊

在admin.php的我有我的結果的無序列表：

$queryList = "SELECT * FROM images WHERE gallery = '$gallery' ORDER BY id DESC"; 
$result_selectList = mysqli_query($dblink, $queryList); 

while($row = mysqli_fetch_array($result_selectList)) { 
    $id = $row['id']; 
    $image = $row['img_name'];     
    $name = $row['name']; 
    $description = $row['description']; 
    $gallery = $row['gallery']; 
?> 
    <li id="item_<?php echo $id; ?>"> 
     <img src='../../upload/galleries/<?php echo $gallery; ?>/<?php echo $image; ?>' /> 
     <span>Image name:</span> <a href="javascript:void(0);" id="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a> 
     <span>Description:</span> <a href="javascript:void(0);" id="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a> 

    ............... 
    ............... 
    </li> 

這是啓用x-editable的Javascript：

//turn to inline mode 
$.fn.editable.defaults.mode = 'popup'; 

$(function() { 
    $('#name').editable(); 
    $('#description').editable(); 
}); 

點擊我想修改的字段工作正常，但只適用於第一個結果組。 當我點擊第二個時，彈出窗口不出現。

任何想法？

UPDATE： 似乎這個自動的代碼

class="editable editable-click" 

僅在第一組加入。

Answer 1

id s在文檔中必須是唯一的。你有n數id="name"和id="description

<span>Image name:</span> <a href="javascript:void(0);" id="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a> 
<span>Description:</span> <a href="javascript:void(0);" id="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a> 

所以$('#name').editable();/$('#description').editable();只結合到第一ID實例

改變他們班

<span>Image name:</span> <a href="javascript:void(0);" class="name" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter name"><?php echo $name; ?></a> 
<span>Description:</span> <a href="javascript:void(0);" class="description" data-type="text" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="Enter description"><?php echo $description; ?></a> 

並綁定到類

$(function() { 
    $('.name').editable(); 
    $('.description').editable(); 
});