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

Question

我有一个模态窗口，可以动态填充。单击按钮后，它将为表格中的每一行打开。这是一个例子：

<!-- 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'
    });
}

但问题是，每次打开模式时，它都运行良好。所有数据填写无任何错误。所有文本与表格中的内容相同。模态中的所有 PK 变化，当我编辑/保存文本时效果很好。但是在我第二次提交表单后，它只更改了我首先提交的第一个“pk”。但不是新的，每次我打开模式时都会更新。

Answer 1

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

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

就在之前：

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