Question

我试图在点击按钮时添加一些元素。附加工作正常，css样式不适用于附加元素。这是我的HTML

$(".tab-pane").on('click',"#addicon_itenary", function () {
    $("#multicity_div").append(
        '<div class="row" style="padding-left:15px">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="form-group label-floating float-label-control" id="select-field">
                    <div class="float-label-control">
                        <label class="control-label">From<small>(required)</small></label>
                    </div>
                    <select class="form-control dropdown" id="country-list">
                        <option>Australia</option>
                        <option>China</option>
                        <option>India</option>
                        <option>Pakistan</option>
                        <option>Russia</option>
                        <option>United Arab Emirates</option>
                        <option>United Kingdom</option>
                        <option>United States of America</option>
                        <option>Zimbabwe</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" id="tocity">
                <div class="form-group label-floating float-label-control" id="select-field">
                    <div class="float-label-control">
                        <label class="control-label">To<small>(required)</small></label>
                    </div>
                    <select class="form-control" id="country-list-to">
                        <option>Australia</option>
                        <option>China</option>
                        <option>India</option>
                        <option>Pakistan</option>
                        <option>Russia</option>
                        <option>United Arab Emirates</option>
                        <option>United Kingdom</option>
                        <option>United States of America</option>
                        <option>Zimbabwe</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="form-group label-floating">
                    <label class="control-label">Depart<small>(required)</small></label>
                    <input type="text" class="form-control datetimepicker">
                </div> 
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <i class="material-icons"id="deleteicon_itenary">delete</i>&nbsp;&nbsp;
                <i class="material-icons"id="addicon_itenary">add</i> 
            </div>
        </div>'
    );
});

如何为此应用样式？

提前致谢

Answer 1

我不知道为什么它不适合你，我试图删除所有的div并保留2个div只是为了检查它是否真的不起作用，

这是链接https://jsfiddle.net/rsr757zv/

如您所见，内联样式生效，

HTML文件 - 我创建了一个简单的html文件，只是为了让它全部工作，因为你没有提供你的html文件，我不知道你的html文件是什么样的，所以这可能与你的有点不同期待，但我的目标是将html文件与其样式相结合，

 <div class='tab-pane'>
      Some TAB-PANE
      <br>
      <button id='addicon_itenary' type='button'>Click Me</button>
    </div>
    <div id='multicity_div'>
      append here
    </div>

脚本文件

<script>
 $(".tab-pane").on('click',"#addicon_itenary",function () {
 $("#multicity_div").append("<div class='row' style='padding-left:15px;border:1px solid #333;'><div class='col-xs-12' style='background:#0f0;'>aa</div></div>");
});
</scipt>

样式不适用于jquery附加元素

1 个答案: