JQuery doesn't see updated attribute value

Question

I have some JS code in which I load list of projects using ajax. Each project has corresponding "Edit" button like this:

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

data-id serves me to distinguish to which project this button corresponds. I created generic handler for modals for those buttons:

$(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);
});

This handler fills input form with current project name. When user changes this name in input and click save button I send ajax call to server and dynamically update values in 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);
};

In chrome dev tools I can see that after correct ajax PUT data-id is updated in DOM. However, when I open EditProjectDialog again it loads old projectName. Any suggestions what am I doing wrong and why $(this).data('id') loads old value of data-id attribute?

Answer 1

.click() is considered a direct binding in jQuery, which will not work with dynamically generated content. on() is considered a delegated binding which should fit your needs:

$('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"
            });
        }
    });
});

EDIT: Forgot quotes around #saveEditProjectButton.

Answer 2

My issue was that I jQuery did cache the data value. So I ended up not using jQuery, but just using plain Javascript.

jQuery:

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

Javascript:

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

The normal Javascript doesn't cache anything and load the updated data-id value.