javascript - 如何创建 JQueryTE 文本编辑器的动态实例

Question

我正在尝试创建一个包含动态创建的 this editor 实例的小程序.

除了能够创建一个打开/关闭编辑器的按钮之外，我可以正常使用它。 jsFiddle到目前为止我所拥有的。

"use strict";
$(document).ready(function() {

var createPad = $("#createPad").click(function () {
var body = document.getElementById("body");

var editorNumberCounter = 1;
var toggleOnOffCounter= 1;
var editorName = '.'+ (editorNumberCounter++);


var status = document.createElement('div');
status.className = "status";
status.id = "status";

var editorName= document.createElement('span');
editorName.className = "status";
editorName.id = "status";

$(body.appendChild(status));
$(body.appendChild(editorName));

var toggle = status.id + toggleOnOffCounter++;

    $(editorName).jqte();

    // settings of status
    var jqteStatus = true;
    $(toggle).click(function()
    {
        jqteStatus = jqteStatus ? false : true;
        $(editorName).jqte({toggle : jqteStatus})
    });

     });

    });

Answer 1

我对您的代码进行了一些更改，现在似乎可以正常工作了。

我试着逐点解释它们:

1. 变量 editorNumberCounter 和 toggleOnOffCounter 必须在全局范围内，否则您会丢失增量值
2. 元素的 ID(动态创建或非动态创建)必须是唯一的，因此我创建 div 和 span 元素时考虑了计数器
3. 对于动态创建的元素，您必须使用 bind方法或事件不会被绑定(bind)
4. toggle 属性不存在!您必须使用 status 属性
5. 被绑定(bind)到 JQTE 上的元素是被点击元素之后的下一个元素

代码:

var editorNumberCounter = 0;
var toggleOnOffCounter = 0;
$(document).ready(function () {

    var createPad = $("#createPad").click(function () {
        var body = document.getElementById("body");

        var editorName = '.' + editorNumberCounter++;
        toggleOnOffCounter++;


        var status = document.createElement('div');
        status.className = "status";
        status.id = "div_status" + editorNumberCounter;

        var editorName = document.createElement('span');
        editorName.className = "status";
        editorName.id = "span_status" + editorNumberCounter;

        $(body.appendChild(status));
        $(body.appendChild(editorName));

        $(editorName).jqte();

        // settings of status
        var jqteStatus = true;
        $("#div_status" + editorNumberCounter).bind("click",function () {
            jqteStatus = jqteStatus ? false : true;
            $(this).next().jqte({
                status: jqteStatus
            })
        });

    });

});

这是一个有效的 fiddle :http://jsfiddle.net/IrvinDominin/UfhNQ/14/