Javascript，X-Editable 仅更新第一个提交的数据，而不更新第二个

Question

我有一个动态填充的模态 window。单击按钮后，它会为 table 中的每一行打开。这是一个例子：

<!-- The Modal -->
<div id="callModal" class="callModal">
     <!-- Modal content -->
    <div class="modalCall-content">
      <div class="modalCall-header">
        <span class="closeModal">&times;</span>
        <h2 id="nameOfCalled">Modal Header</h2>
      </div>
      <div class="modalCall-body">
        <p class="shortNoteOfLeadClass" id="shortNoteOfLead" style="font-size:25px;"></p>
        <p>There will be statuses, notes and last call info...</p>
      </div>
      <div class="modalCall-footer">
        <h3><button type="button" class="btn btn-danger">End Call</button></h3>
      </div>
    </div> 
</div>

我是这样填表的：

// Get the modal
var modal = document.getElementsByClassName('callModal')[0];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeModal")[0];

// When the user clicks on the button, open the modal
function callThisTel(telID) {
    var leadName = document.getElementById("leadName_"+telID).textContent;
    var leadDescript = document.getElementById("leadDescript_"+telID).textContent;
    var assignedTo = document.getElementById("leadAssignedTo_"+telID).getAttribute("data-title");
    var currentProfile = document.getElementsByClassName("staff-profile")[0].getAttribute("alt");
    document.getElementsByClassName("shortNoteOfLeadClass")[0].setAttribute("data-pk", telID);

    document.getElementById("nameOfCalled").textContent = leadName;
    document.getElementsByClassName("shortNoteOfLeadClass")[0].textContent = leadDescript;
    modal.style.display = "block";
    $.fn.editable.defaults.mode = 'inline';
    $('.shortNoteOfLeadClass').editable({
        url: '<?php echo base_url('changeData.php'); ?>',
        pk: telID,
        type: 'text',
        title: 'Change description'
    });
}

但问题是，每次打开模式时，它都运行良好。所有数据填写无误。所有文本都与 table 中的一样。模态中的所有 PK 都发生了变化，当我 edit/save 发短信时效果很好。但是在我第二次提交表格后，它只改变了我在第一时间提交的第一个 "pk"。但不是新的，每次我打开模态时都会更新。

Answer 1

更新：现在它可以正常工作了，但是，只有当我输入：

$('.shortNoteOfLeadClass').editable("destroy");

之前：

document.getElementsByClassName("shortNoteOfLeadClass")[0].setAttribute("data-pk", telID);

Javascript，X-Editable 仅更新第一个提交的数据，而不更新第二个

Javascript, X-Editable is updating only the first submitted data, but not the second

html

javascript

jquery

x-editable

twitter-bootstrap-3