JQUERY：CSS不适用于动态创建的元素

Question

我正在创建一个带有成功函数的ajax调用，如下所示

for (i = 1; i < selector_names.length; i++) {
    if (selector_names[i] == "placement") {
        add_options = "";
        for (j = 0; j < option_names[i].length; j++) {
            add_options += "<div class='option-container'><input class='check-box-" + selector_names[i] + "' type='checkbox' id='" + option_names[i][j] + "' checked='checked'/><label class='option-label' for='" + option_names[i][j] + "'>" + option_names[i][j] + "</label></div>";
        }
    }
}
$("#Placement").next().append(add_options);

这些是我应用于div，复选框和标签的样式：

.option-container {
    padding:1% 1% 1% 0%;
}
input {
    postion:relative;
    vertical-align:middle;
    height:12px;
    width:12px;
    border-radius: 50px;
}
.option-label {
    margin:2%;
    vertical-align:middle;
    font-family: sans-serif;
    font-size: 12px;
    color:#000;
    cursor:pointer;
}

但是，与手动创建的元素相比，动态添加元素的样式不同。为什么会这样？

以下是它的外观，前2个复选框是手动创建的，后两个是动态生成的。我附加的#Placement div默认隐藏，并在点击标题时展开。

差异很小但很明显。

当我修改CSS时，它适用于两种类型的元素，默认值和jquery之间的差异仍然存在。例如，如果我增加.option-container上的边距，它会增加两者，但相对差异仍然存在。

手动创建的复选框的HTML：

<div class="option-container">
<input class="check-box-placement" type="checkbox" id="pdpv1" checked="checked"/>
<label class="option-label" for="pdpv1">pdpv1</label>
</div>
<div class="option-container"> 
<input class="check-box-placement" type="checkbox" id="pdph1" checked="checked"/>
<label class="option-label" for="pdph1">pdph1</label>
</div>

Answer 1

HTML字符串中的

：

"<div class='option-container'></span></span><input class='check-box-"+selector_names[i]+"' type='checkbox' id='"+option_names[i][j]+"' checked='checked'/><label class='option-label' for='"+option_names[i][j]+"'>"+option_names[i][j]+"</label></div>"

打开DIV，关闭2个span标签，在关闭第一个DIV之前添加自动关闭复选框和标签。将第一个span标记转换为openning标记，或从HTML字符串中删除两个span标记以进行修复。

如果有早期打开的span标签使这个标记有效..删除它们除非你一次性插入所有HTML，HTML引擎可能会自动关闭以前添加的开放范围标签，或者只是弄乱所有HTML从那时开始渲染。您不应该逐个添加HTML标记，否则浏览器将无法可靠地匹配开放和结束标记。

我建议你使用模板化的JavaScript库（淘汰/把手等......）来构建这样的HTML，这样你就不必在字符串中搜索bug了。

Answer 2

由于jQuery在OP中被标记，我建议使用更多jQuery的语义，而不是寻找一些字符串问题。

一种方法是使用jQuery的clone()方法重现相同的标记，而不是处理字符串。精心设计的html字符串是不可读的。由于我没有selector_names和option_names的任何示例值，因此我在演示中假定了默认值并进行了简化。它可以是这样的：

var $optionContainerModel = $('.option-container:first');
var $placementNext = $('#Placement').next();
for (var i = 0; i < selector_names.length; i++) {
    if (selector_names[i] == "placement") {
        var $newoption = $optionContainerModel.clone();
        $newoption.find('.check-box-placement').attr('id', 'cbp'+i);
        var $label = $newoption.find('.option-label');
        $label.attr('for', 'cbp'+i);
        $label.text( option_names[i] );
        $placementNext.append( $newoption );
    }
}

如果您没有至少一个要克隆的容器，则会发生主要警告。但是，如果ajax成功的目标是复制一个复选框模板，那么实际复制它可能更具可读性。

DEMO