jQuery沒有看到更新的屬性值

Question

我有一些JS代碼，可以在其中使用ajax加載項目列表。 每個項目都有相應的“編輯”按鈕，如下所示：

<button class="btn btn-default open-EditProjectDialog" data-toggle="modal" data-id="someProjectName" data-target="#editProjectModal">Edit</button>

data-id可幫助我區分此按鈕對應於哪個項目。 我為這些按鈕的模態創建了通用處理程序：

$(document).on(
    "click",
    ".open-EditProjectDialog",
    function() {
        var projectName = $(this).data('id');
        console.log("onclick open-EditProjectDialog " + projectName);
        $(".modal-body #projectNameInput").val(projectName);
        sessionStorage.setItem("currentlyConsideredProject", projectName);
});

該處理程序使用當前項目名稱填充輸入表單。 當用戶在輸入中更改此名稱並單擊保存按鈕時，我向服務器發送ajax調用並動態更新DOM中的值：

$("#saveEditProjectButton").click(
function() {
var newProjectName = $('#projectNameInput').val();
var projectName = sessionStorage.getItem("currentlyConsideredProject");
    (...) //some checking
$.ajax({
    url : '/services/projects/' + projectName,
    type : 'PUT',
    data : newProjectName,
    success : function(result) {
        $('#editProjectModal').modal('hide');
        $.growl.notice({
           message : "Changes saved"
        });
        updateProjectInDom(projectName, newProjectName);
    },
    error : function() {
        $('#editProjectModal').modal('hide');
        $.growl.error({
             message : "Could not save the changes"
        });
    }
});
});

function updateProjectInDom(projectName, newProjectName) {
    var projectDiv = $("div #" + projectName);
    projectDiv.attr("id", newProjectName);  
    projectDiv.find("button").attr("data-id", newProjectName);
};

在chrome開發工具中，我可以看到在DOM中更新了正確的ajax PUT data-id之后。 但是，當我再次打開EditProjectDialog時，它將加載舊的projectName。 任何建議我在做什么錯，為什么$（this）.data（'id'）加載data-id屬性的舊值？

Answer 1

.click（）被認為是jQuery中的直接綁定，不適用於動態生成的內容。 on（）被視為委托的綁定，應滿足您的需求：

$('body').on('click', '#saveEditProjectButton', function() {
    var newProjectName = $('#projectNameInput').val();
    var projectName = sessionStorage.getItem("currentlyConsideredProject");
        (...) //some checking
    $.ajax({
        url : '/services/projects/' + projectName,
        type : 'PUT',
        data : newProjectName,
        success : function(result) {
            $('#editProjectModal').modal('hide');
            $.growl.notice({
                message : "Changes saved"
            });
            updateProjectInDom(projectName, newProjectName);
        },
        error : function() {
            $('#editProjectModal').modal('hide');
            $.growl.error({
                 message : "Could not save the changes"
            });
        }
    });
});

編輯：忘記#saveEditProjectButton周圍的引號。

Answer 2

我的問題是我的jQuery確實緩存了數據值。 所以我最終沒有使用jQuery，而只是使用普通的Javascript。

jQuery的：

$('#element').data('id');

使用Javascript：

document.getElementByID('element').dataset.id;

普通的Javascript不會緩存任何內容，也不會加載更新的data-id值。