Javascript 使用nicedit编辑动态创建的div

我在一个页面上有三个动态创建的div。当用户单击div时，会出现“编辑文本”按钮

当用户单击编辑文本按钮时，我希望在div上显示nicedit格式栏，以便用户可以编辑文本

我已经创建了下面的大部分代码，但在编辑另一个框时，我遇到了从一个框中删除格式栏的问题。此外，编辑框后，不能再次编辑

我哪里做错了

我已经创建了一个JSFIDLE，这样您就可以看到我的问题所在-

这是代码

<style>
    .dragbox {
        position:absolute;
        width:10px;
        height:25px;
        padding: 0.0em;
        margin:25px;
        z-index:2
    }
    .textarea1 {
        width: 300px;
        height:75px;
        padding: 0.5em;
        z-index:3;
        resize:none;
    }
    #content {
        display: block;
        position:absolute;
        top:150px;
        left:0px;
        margin:auto;
        z-index:1;
    }
    .editbutton {
        background-color:#CCC;
        width:50px;
        height:20px;
        font-size:10px;
        z-index:1003;
    }
    #myNicPanel {
        visibility:hidden;
    }
</style>
<script>
    var startleft = -100;
    var myNicEditor;

    for (var m = 1; m < 4; m++) {
        startleft = +startleft + 200;
        OldTextArea(m, 'draggable', 50, startleft, '150', '150', 'new textbox', m, '5', 'solid', '#ff0000', '5');
    }

    function OldTextArea(i, id, top, left, width, height, content, zindex, borderwidth, borderstyle, bordercolor, padding) {
        id = id + i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('iterate', i);
        newdiv.style.position = "absolute";
        newdiv.style.top = top + "px";
        newdiv.style.left = left + "px";
        newdiv.innerHTML = "<br><div id='div" + i + "' name='textarea[" + i + "]'  class='textarea1' style='padding:" + padding + "px; border-width:" + borderwidth + "px; border-style:" + borderstyle + ";  border-color:" + bordercolor + "; width:" + width + "px; height:" + height + "px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div></div>";
        document.getElementById("frmMain").appendChild(newdiv);
        var top_button_left_pos = -75;
        var area1 = "";
        var edit = document.createElement('input');
        edit.setAttribute('type', 'button');
        edit.setAttribute('value', 'edit this text');
        edit.setAttribute('class', 'editbutton');
        edit.style.position = "absolute";
        edit.style.top = "30px";
        edit.style.width = "75px";
        edit.style.left = +top_button_left_pos + "px";
        edit.style.float = "left";
        edit.style.visibility = "hidden";
        edit.onclick = function(e) {
            if (area1 == "") {
                myNicEditor = new nicEditor({
                    buttonList: ['fontSize', 'fontFamily', 'fontFormat', 'bold', 'italic', 'underline', 'left', 'centre', 'right', 'justify', 'ol', 'ul', 'removeformat', 'indent', 'outdent', 'hr', 'forecolor', 'bgcolor', 'link', 'unlink']
                });
                myNicEditor.setPanel('myNicPanel');
                myNicEditor.addInstance('div' + i);
                var contentclick = document.getElementById('span' + i);
                contentclick.style.cursor = "select";
                contentclick.onmousedown = function(event) {
                    event.stopPropagation();
                    e.cancelBubble = true;
                };

                document.getElementById('myNicPanel').style.position = 'relative';
                document.getElementById('myNicPanel').style.top = +top + "px";
                document.getElementById('myNicPanel').style.left = +left + "px";
                document.getElementById('myNicPanel').style.visibility = 'visible';
                area1 = '1';
            } else {
                area1 = "";
                document.getElementById('myNicPanel').style.visibility = 'hidden';
                myNicEditor.removeInstance('div' + i);
            }
        };
        newbr = document.createElement('BR');
        document.getElementById(id).appendChild(newbr);
        document.getElementById(id).appendChild(edit);

        $('.dragbox').click(function() {
            $(".editbutton").css('visibility', 'hidden');
            $(this).find(".editbutton").css('visibility', 'visible');
        });
        $('.dragbox').focusout(function() {
            $(".editbutton").css('visibility', 'hidden');
            $('#frmMain').find('#myNicPanel').style.visibility = 'hidden';
        });

    }
</script>

<div id="myNicPanel" style="width: 600px;"></div>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div19.php" method="post">
    <div id="content"></div>
</form>

dragbox先生{
位置：绝对位置；
宽度：10px；
高度：25px；
填充：0.0em；
利润率：25px；
z指数：2
}
.text区域1{
宽度：300px；
高度：75px；
填充：0.5em；
z指数：3；
调整大小：无；
}
#内容{
显示：块；
位置：绝对位置；
顶部：150px；
左：0px；
保证金：自动；
z指数：1；
}
.编辑按钮{
背景色：#CCC；
宽度：50px；
高度：20px；
字体大小：10px；
z指数：1003；
}
#myNicPanel{
可见性：隐藏；
}
var Steatleft=-100；
var myNicEditor；
对于（var m=1；m<4；m++）{
starteft=+starteft+200；
OldTextArea（m'Dragable'，50，startleft，'150'，'150'，'new textbox'，m'5'，'solid'，'#ff0000'，'5'）；
}
函数OldTextArea（i、id、top、left、width、height、content、zindex、borderwidth、borderstyle、bordercolor、padding）{
id=id+i；
var newdiv=document.createElement（'div'）；
newdiv.setAttribute（'id'，id）；
setAttribute（'class'，'dragbox'）；
newdiv.setAttribute（'iterate'，i）；
newdiv.style.position=“绝对”；
newdiv.style.top=top+“px”；
newdiv.style.left=左+“px”；
newdiv.innerHTML=“
”+内容+”；
文件.getElementById（“frmMain”）.appendChild（newdiv）；
var顶部按钮左位置=-75；
var area1=“”；
var edit=document.createElement（'input'）；
edit.setAttribute（'type'，'button'）；
edit.setAttribute（'value'，'edit this text'）；
edit.setAttribute（'class'，'editbutton'）；
edit.style.position=“绝对”；
edit.style.top=“30px”；
edit.style.width=“75px”；
edit.style.left=+顶部按钮\左侧按钮\位置+“px”；
edit.style.float=“left”；
edit.style.visibility=“hidden”；
edit.onclick=函数（e）{
如果（区域1==“”）{
myNicEditor=新的nicEditor({
按钮列表：['fontSize'，'fontFamily'，'fontFormat'，'bold'，'italic'，'underline'，'left'，'centre'，'right'，'justify'，'ol'，'ul'，'removeformat'，'indent'，'outdent'，'hr'，'forecolor'，'bgcolor'，'link'，'unlink']
});
myNicEditor.setPanel（'myNicPanel'）；
myNicEditor.addInstance（'div'+i）；
var contentclick=document.getElementById（'span'+i）；
contentclick.style.cursor=“选择”；
contentclick.onmousedown=函数（事件）{
event.stopPropagation（）；
e、 取消气泡=真；
};
document.getElementById（'myNicPanel'）。style.position='relative'；
document.getElementById（'myNicPanel'）。style.top=+top+“px”；
document.getElementById（'myNicPanel'）.style.left=+left+“px”；
document.getElementById（'myNicPanel'）。style.visibility='visible'；
区域1='1'；
}否则{
区域1=“”；
document.getElementById（'myNicPanel'）。style.visibility='hidden'；
myNicEditor.removeInstance（'div'+i）；
}
};
newbr=document.createElement（'BR'）；
document.getElementById（id）.appendChild（newbr）；
document.getElementById（id）.appendChild（编辑）；
$（'.dragbox'）。单击（函数（）{
$（“.editbutton”）.css（‘可见性’、‘隐藏’）；
$（this.find（“.editbutton”）.css（'visibility'，'visible'）；
});
$（'.dragbox'）.focusout（函数（）{
$（“.editbutton”）.css（‘可见性’、‘隐藏’）；
$（'#frmMain'）。查找（'#myNicPanel'）。style.visibility='隐藏'；
});
}

编辑

---

我已设法使编辑栏消失，并在从一个框到另一个框单击时重新出现，但编辑后，我无法使编辑栏重新出现在该框上-

我设法通过删除

focusout

功能使其工作。

这并不能回答问题。若要评论或要求作者澄清，请在他们的帖子下方留下评论。我回答了自己的问题，没有人给我任何答案，答案很清楚。如果删除脚本底部的focus out函数，它将正常工作。