我在循环中有以下代码:
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()
将数据项附加到元素和那么如何在单击函数中检索它们?
答案 0 :(得分:0)
问题是您在将实际添加到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 强>