Question

我在循环中有以下代码：

            newLink = "<li class=\"styledli\" id=\"id" + i + "\" ><p>" + list[i] + "</p></li>";
            htmlListString = htmlListString + newLink;

    $("#id"+i).data("parm1",list[i]);

在循环外我做：

    $('#listUL').empty();

$('#listUL').on('click', 'li', function(e) {
        alert("Works id="+this.id); // id of clicked li by directly accessing DOMElement property
    console.log("this.id="+this.id+" parm1="+JSON.stringify($("#"+this.id).data()));
    });

$('#listUL').append(htmlListString);

当此操作运行时，警报显示正确的ID，但console.log显示“parm1 = {}”

我不明白为什么。我在循环运行之前移动$('#listUL').empty();并且没有效果。我在$('#listUL').on('click',之后移动$('#listUL').append(htmlListString);，但没有效果。

如何使用.data()将数据项附加到元素和那么如何在单击函数中检索它们？

Answer 1

问题是您在将实际添加到DOM之前尝试在listitem上使用.data（）。选择器$("#id"+i)将返回零项，直到行$('#listUL').append(htmlListString);

之后

在您的情况下，最简单的方法是在listitem字符串中包含data属性：

var newLink = "<li data-parm1=\"" + list[i] + "\" class=\"styledli\" id=\"id" + i + "\" ><p>" + list[i] + "</p></li>";

此外，如果您只想返回param1的纯字符串，则不需要JSON.stringify（），而是：$(this).data("parm1")

<强> DEMO

jQuery / jQuery Mobile .data（）附加无法通过点击

1 个答案: