jquery - 使用 jquery.data() 为新创建的节点设置的值，无法在其他方法中访问 - 返回未定义!

Question

我在 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)

Answer 1

首先感谢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上设置即可。

希望能帮助遇到同样问题的人:)