Question

我动态创建了一些ul和span标签。现在，我尝试通过点击功能动态添加内容。标签在ul内创建，但内容不会插入。这是代码：

 <div class="main"></div>
 <div class="content-list"><ul class="information"> </ul></div>

这里是带有函数和监听器的Javascript：

var $contentHandler = $(".content-list");
var $mainHandler = $(".main");
var $infoHandler = $(".information");
var circleCounter = 1;

$mainHandler.click(function() {

var htmlString = "<li class='" + circleCounter + "'> <span class='circle-color'> var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </span> <br> <span class='circle-radius'> This is supposed to change </span> <br> <span class='circle'> This is supposed to change </span> </li>"
$infoHandler.append(htmlString);
updateList();    
circleCounter++;   

});

function updateList() {

    var listItems = $('.information').find('li#' + circleCounter);

    var len = circleCounter;
    for (var i = 0; i < len; i++) {
        //We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
        var currentItem = circles[i];
        var updateStringRadius = "var radius = " + circleCounter + ";";
        var updateStringCircle = "circle (" + circleCounter + " ," + circleCounter + ", radius)";
        //This is the div Item for the particular div of each element
        var divItem = $(listItems[i]);
        var radiusItem = divItem.find("span.circle-radius");
        var circleItem = divItem.find("span.circle");
        radiusItem.text(updateStringRadius);
        circleItem.text(updateStringCircle);
        // divItem.text(updateString);

        var $circleRadiusHandler = $(".circle-radius");

    }
}

有关如何使其发挥作用的任何建议。这是一个JSFiddle：

http://jsfiddle.net/mauricioSanchez/wL6Np/1/

谢天谢地，

Answer 1

你只需要改变：

var listItems = $('.information').find('li#' + circleCounter);//this searches by id
//To:
var listItems = $('.information').find('li.' + circleCounter);//this searches by class`

//And remove:

var currentItem = circles[i];

Answer 2

为什么要在定义HTML后尝试编辑HTML？为什么不使用这样的模板：

var listItemClass = 'someclass',
    typeOfColor = 'somecolor',
    radiusOne = 'someradius',
    radiusTwo = 'anotherradius';

var listItem = "<li class='{0}'> \
    <span class='circle-color'> var color =  \
        <div class='circle-color-input' contentEditable autocorrect='off'> {1}</div> ;  \
    </span> \
    <br> \
    <span class='circle-radius'>{2}</span> \
    <br> \
    <span class='circle'>{3}</span> \
</li>";

listItem.format(listItemClass, typeOfColor, radiusOne, radiusTwo);

使用以下format定义：

String.prototype.format = String.prototype.f = function () {
    var s = this,
        i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    }
    return s;
};

这样，您不必担心事后在预定义结构中找到某些元素。您只是用您指定的任何内容替换某些部分。

动态创建和添加内容

2 个答案: