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

由于 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

Answer 2

在您的 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 个跨度标签，在关闭第一个 DIV 之前添加自动关闭复选框和标签。将第一个 span 标签变成打开标签或从 HTML 字符串中删除两个 span 标签以进行修复。

如果有较早打开的跨度标签使此标记有效.. 删除它们，除非您一次性插入所有 HTML，HTML 引擎可能会自动关闭先前添加的打开跨度标签，或者只是弄乱所有 HTML从那时起渲染。您不应该零碎地添加 HTML 标签，否则浏览器将无法可靠地匹配开始和结束标签。

我建议您使用模板化 JavaScript 库（敲除/把手等）来构造这样的 HTML，这样您就不必在字符串中搜索错误。