JQuery 看不到更新的属性值答案

【问题标题】：JQuery doesn't see updated attribute valueJQuery 看不到更新的属性值
【发布时间】：2014-07-07 19:04:37
【问题描述】：

我有一些 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 属性的旧值？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案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 周围的引号。

【讨论】：

【解决方案2】：

我的问题是我 jQuery 确实缓存了数据值。所以我最终没有使用 jQuery，而只是使用普通的 Javascript。

jQuery:

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

Javascript：

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

普通的 Javascript 不会缓存任何东西并加载更新的 data-id 值。

【讨论】：