Bind function with parameters to dynamically created element of dynamically added event

Question

My question is little bit confuse. I created comment box to post comments in javascript. I am posting every comment using javascript by creating dynamically created elements, attributes and event handlers.

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>

my question is

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.

here is jsfiddle

thanks in advance.

Answer 1

Don't set the listener to the function name. That's not how it works. Send the function itself:

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

Also, depending on what exactly you want, joining the params may also not be what you REALLY want to do.

---

Additional answer:

Found a bug in your code:

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

You're creating an HTML element (in this case a button) with the same name as a function. This causes the function to be deleted. This is a very weird feature that was introduced by IE that was copied by other browsers for compatibility with IE specific sites. Now it's part of the HTML5 specification :(

To fix this either rename your function or rename the element. See this edit for an example fix: http://jsfiddle.net/pcmyzhqu/10