javascript - 将带参数的函数绑定(bind)到动态添加事件的动态创建元素

Question

我的问题有点困惑。我创建了评论框来用 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

提前致谢。

Answer 1

不要将监听器设置为函数名称。事情不是这样的。发送函数本身:

{eventName:"onclick",eventParams:[cComments[i].cId],customFunction:deleteComment}

此外，根据您到底想要什么，加入参数也可能不是您真正想要做的。

<小时/>

附加答案:

在您的代码中发现一个错误:

{name:"id",value:"deleteComment"}

您正在创建一个与函数同名的 HTML 元素(在本例中为按钮)。这会导致该函数被删除。这是 IE 引入的一个非常奇怪的功能，被其他浏览器复制以兼容 IE 特定网站。现在它是 HTML5 规范的一部分:(

要解决此问题，请重命名您的函数或重命名该元素。请参阅此编辑以获取示例修复:http://jsfiddle.net/pcmyzhqu/10