我的问题有点困惑。我创建了评论框来用 javascript 发表评论。我通过创建动态创建的元素、属性和事件处理程序,使用 javascript 发布每条评论。
Javascript:
var commentSubmit = document.getElementById("commentSubmit"),
commentBox = document.getElementById("commentBox"),
deleteComment = document.getElementById("deleteComment"),
commentList = document.getElementById("commentList");
function getDataFromLocalStorage(){
var i = 0,
cArr = [],
cKey;
for (; cKey = window.localStorage.key(i); i++) {
var cObj = {};
cObj.cId = cKey;
cObj.cText = window.localStorage.getItem(cKey);
cArr.push(cObj);
}
return cArr;
}
function createElement(name,attr,events,html){
debugger;
var elem = document.createElement(name);
var elemText;
if(html){
for(var i=0;i<html.length;i++){
if(html[i].name == "text"){
elemText = document.createTextNode(html[i].value)
elem.appendChild(elemText);
}else{
elem.appendChild(html[i].value);
}
}
}
if(events){
for(var i=0;i<events.length;i++){
if(events[i]["customFunction"]){
elem.addEventListener(events[i].eventName,events[i]["customFunction"].bind(elem,events[i].eventParams.join(" ")),false);
}
}
}
for(var i=0;i<attr.length;i++){
elem.setAttribute(attr[i].name, attr[i].value);
}
return elem;
}
function deleteComment(cId){
localStorage.removeItem(cId);
loadComments();
}
function loadComments(){
var cComments = getDataFromLocalStorage(),
cTotal = cComments.length;
commentList.innerHTML = "";
if(cTotal){
for(var i=0;i<cTotal;i++){
var deleteCommentButton = createElement("BUTTON",
[
{name:"class",value:"deleteComment"},
{name:"id",value:"deleteComment"},
{name:"value",value:"X"}
],
[
{eventName:"onclick",eventParams:[cComments[i].cId],customFunction:"deleteComment"}
]
);
var commentWrapper = createElement("DIV",
[
{name:"class",value:"commentWrapper"},
{name:"id",value:cComments[i].cId}
],
[
{name:"text",value:cComments[i].cText},
{name:"html",value:deleteCommentButton}
]
);
/*var commentText = document.createTextNode(cComments[i].cText);
commentWrapper.setAttribute("class", "commentWrapper");
commentWrapper.setAttribute("id", cComments[i].cId);
commentWrapper.appendChild(commentText);*/
commentList.appendChild(commentWrapper);
}
}
}
loadComments();
commentSubmit.addEventListener("click", function(e){
var cKey = Date.now();
if(commentBox.value != ""){
localStorage.setItem(cKey,commentBox.value);
loadComments();
}
e.preventDefault();
return false;
}, false);
html:
<div class="commentForm">
<form>
<textarea rows=5 id=commentBox></textarea>
<button id=commentSubmit>Post</button>
</form>
</div>
<div id="commentList">
</div>
我的问题是
i want to attach
deleteComment function
to the dynamically created element. here, i am sending the function name also dynamically. i was unable to bind function.
这里是jsfiddle
提前致谢。
最佳答案
不要将监听器设置为函数名称。事情不是这样的。发送函数本身:
{eventName:"onclick",eventParams:[cComments[i].cId],customFunction:deleteComment}
此外,根据您到底想要什么,加入参数也可能不是您真正想要做的。
<小时/>附加答案:
在您的代码中发现一个错误:
{name:"id",value:"deleteComment"}
您正在创建一个与函数同名的 HTML 元素(在本例中为按钮)。这会导致该函数被删除。这是 IE 引入的一个非常奇怪的功能,被其他浏览器复制以兼容 IE 特定网站。现在它是 HTML5 规范的一部分:(
要解决此问题,请重命名您的函数或重命名该元素。请参阅此编辑以获取示例修复:http://jsfiddle.net/pcmyzhqu/10
关于javascript - 将带参数的函数绑定(bind)到动态添加事件的动态创建元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33994081/