Javascript JQuery没有';看不到更新的属性值
我有一些JS代码,其中我使用ajax加载项目列表。每个项目都有相应的“编辑”按钮,如下所示:Javascript JQuery没有';看不到更新的属性值,javascript,jquery,html,twitter-bootstrap,modal-dialog,Javascript,Jquery,Html,Twitter Bootstrap,Modal Dialog,我有一些JS代码,其中我使用ajax加载项目列表。每个项目都有相应的“编辑”按钮,如下所示: <button class="btn btn-default open-EditProjectDialog" data-toggle="modal" data-id="someProjectName" data-target="#editProjectModal">Edit</button> 此处理程序使用当前项目名称填充输入表单。当用户在输入中更改此名称并单击保存按钮时,我会
<button class="btn btn-default open-EditProjectDialog" data-toggle="modal" data-id="someProjectName" data-target="#editProjectModal">Edit</button>
此处理程序使用当前项目名称填充输入表单。当用户在输入中更改此名称并单击保存按钮时,我会向服务器发送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数据id之后。但是,当我再次打开EditProjectDialog时,它会加载旧的projectName。有什么建议我做错了什么,以及为什么$(this).data('id')会加载数据id属性的旧值吗?.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周围忘记了引号。我的问题是jQuery确实缓存了数据值。因此,我最终没有使用jQuery,而是使用普通Javascript jQuery:
$('#element').data('id');
Javascript:
document.getElementByID('element').dataset.id;
普通Javascript不会缓存任何内容并加载更新的数据id值
document.getElementByID('element').dataset.id;