我在 HTML 文档中创建一个新的“li”,并在完成 AJAX 请求后(发送表单后),我希望将以下数据添加到 li,如下所示:
<li class="issue" data-winbook-issueId="3">My Issue here</li>
我有相关“li”的引用资料,我尝试执行以下操作:
liReference.data("winbook-issueId", returnedJSONObject.issueId);
如果我在下一行中查询相同的内容,如下所示:
var id = liReference.data("winbook-issueId");
我在警报或调试器中获取了 id 的值。但是,如果我尝试在另一个函数(如 deleteIssue()
)中访问此数据,那么 id 似乎返回未定义!!
最初创建 li 时,没有数据属性。我正在尝试在创建的节点中添加一个新节点(因为“节点”是使用微模板引擎创建的)。
我可能缺少什么想法吗?我附上了下面的代码(上面是下面代码的概念解释)。我正在尝试访问值“data-winbook-issueId”和“data-winbook-issueStatus”
function postDataToWall(contentType, dataAreaToReplaceWithContent)
{
var content = dataAreaToReplaceWithContent.children('.dataForm').val();
var postDetailsContainer = dataAreaToReplaceWithContent.parent();
var wcid = postDetailsContainer.parents('li.listOfIssues').data('winbook-wcid');
var postData ="Issue="+content+"&wcid="+wcid;
$.ajax({
type:"POST",
url:"/Issue",
data:postData,
success:function(result, status){
switch(contentType.toLowerCase())
{
case "Issue".toLowerCase():
dataAreaToReplaceWithContent.remove();
postDetailsContainer.append('<ul class="postDetails">'+
'<li class="issueid">Issue '+result.issueid+':<li>'+
'<li class="postData">'+content+'</li>'+
'<li><ul class="actionsNavBar">'+
'<li><a class="actionNavBarLink" data-winbook-action="CloseIssue">Close Issue</a><span class="dotSeparator">.</span></li>'+
'<li><a class="actionNavBarLink" data-winbook-action="Comment">Comment</a><span class="dotSeparator">.</span></li>'+
'<li><a class="actionNavBarLink" data-winbook-action="Option">Suggest Option/Alternative(s)</a></li>'+
'</ul></li></ul>');
var postNode = postDetailsContainer.parents('li.post');
postDetailsContainer.parents('.dataForm').toggleClass('dataForm');
postNode.children('.hoverMenu').toggle(); //enable the hover menu for delete/edit
postNode.data("winbook-issueStatus","open");
postNode.data("winbook-issueId",result.issueid);
$.data(postNode,"winbook-issueStatus","open");
someData = postNode.data("winbook-issueId");
someData2 = postNode.data("winbook-issueStatus");
break;
}
},//end success function
error: function(xhr, status){
alert("Status: "+xhr.status+" = "+xhr.statusText+": "+xhr.responseText);
}
});//end ajax
编辑:使用数据的函数:
<li class="post issue" data-winbook-issueStatus="open" data-winbook-issueId="44">
<a class="delete" data-winbook-delete="issue">
<img class="hoverButton deleteButton" src="http://localhost:8080/Winbook/images/deleteredicon.png"/>
</a>
<a class="edit" data-winbook-edit="issue">
<img class="hoverButton editButton" src="http://localhost:8080/Winbook/images/editpencil.png"/>
</a>
<div class="postContainer">...</li>
它在 a.delete 的 live('click') 处理程序中调用:
$('a.delete').live('click', function() {
var issueIdToDelete = $(this).parent().data("winbook-issueId");
//send ajax request for deletion...but issueIdToDelete is undefined!!
}
注意:问题仅适用于我想在创建后立即删除的节点。在服务器上创建并发送的节点工作正常...上面的编辑片段是从“显示” data-* 属性的源文件复制的,但在 DOM 树中不可见,如下面的评论中所述(并正确指出所以来自@Pointy)
最佳答案
首先感谢Pointy对我的坚持和包容。
看起来 DOM 结构很好,我不知道的是使用 $.data(key, value)
函数设置数据只在 中执行更新$.cache
并且不会为 DOM 节点创建新的数据属性。你可以查询它,但是会失败的是:
$('[data-winbook-issueId='+result.issueId+']').fadeOut("slow",function(){
$(this).remove();
});
因为根据 ajax 调用刚刚创建的 data-* 属性仅存储在缓存中。要真正让它成为页面 DOM 的一部分并以这种方式引用,您需要使用 .attr(...) 函数来设置它,如下所示:
postNode.attr("data-winbook-issueId",result.issueId);
对此的解释可以在我上面链接到的同一线程中找到:Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?
我尝试订阅 setData 和/或 changeData 事件并使用它来更新,但由于某种原因它不起作用,所以我没有在事件回调中调用 .attr(...) 增加开销直接在postNode上设置即可。
希望能帮助遇到同样问题的人:)
关于jquery - 使用 jquery.data() 为新创建的节点设置的值,无法在其他方法中访问 - 返回未定义!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6402186/