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>

我的问题是

我想将deleteComment 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

使用参数绑定函数以动态创建动态添加事件的元素

1 个答案:

补充答案：