Question

所以我正在创建一个允许用户为网站创建前端主题的Web应用程序;我主要是为了更好地掌握我的JS技能。

我在下面的代码中所做的是创建跨越页面宽度的“框”，我希望允许用户编辑每个单独的框。

我面临的问题是我可以选择用户点击的类/ ID以及我为用户想要的所有元素设置的div;但我似乎无法将任何DOM方法附加到对象上。

错误是未捕获的TypeError：对象editBoxes没有方法'innerHTML'，其中'innerHTML'可以是任何方法。我也尝试过Jquery的.html，结果相同。

     for(i=1; i <= boxes; i++) {
                    box.innerHTML = box.innerHTML + [
                    "<div class = 'globalBox' id = 'box"+i+"'>",
                    "<div class = 'editDyBox'>edit this box <div class = 'editBoxes'></div<!--end edit boxes--></div>",
                    "</div><!--end box-->",   
                        ].join('');
                    }//end for
                 $(".globalBox").css("width", width+"%");

                     $(".editDyBox").click(function(){
                       var parentClass = $(this).parent().attr("id");
                       var childClass = $(this).children().attr("class");
                       var customEdit = $(this).attr("class");
                       var editBoxForm = "<form class = 'editBoxForm'><input type = 'text' name = '"+parent+"' width = '100%'></form>";

                       childClass.innerHTML("hello")
                    });//end editdybox click

谢谢 -art

Answer 1

为什么不使用contenteditable而不是复杂的代码？它专为此而设计。

查看此Demo

<div contenteditable="true">I'm the content</div>

ALL浏览器支持它（是的，甚至是IE5）

它是一个普通的div，所以它跨越了所有可用的宽度，并且他的内容是可编辑的。没有JS或CSS nedded。

Answer 2

此行返回一个字符串，而不是jQuery对象

var childClass = $(this).children().attr("class");

所以你的变量childClass只是一个简单的字符串对象。它永远不会有innerHTML方法。

此外，这将仅返回第一个子类的值，而不返回类值数组。

Answer 3

每个元素使用一个单击处理程序怎么样？

var boxes = 3;
var $boxes = $("#boxes");

$.each(new Array(boxes), function () {

    var box = $("<div/>").appendTo($boxes),
        editBox = $("<div/>").text("edit this box").appendTo(box),
        editBoxForm = $("<div/>").appendTo(editBox);

    editBox.click(function () {
        editBoxForm.html("hello");
    });

});

<强> jsFiddle Demo

Answer 4

删除此

childClass.innerHTML("hello")

通过这个

$(this).children().innerHTML("hello");

动态创建div的方法

4 个答案: