Question

当我尝试使用jQuery的append函数时，我遇到了一个问题，它将一个元素添加到div但它失去了样式。这是一个示例here

这是我的HTML：

<form>
<div class="checkbox">
    <label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
        Toggle One
    </label>
</div>
<div id="mainDiv">
</div>
<div>
    <button type="button" class="btn btn-default" id="btnAdd">
      Add
    </button> 
</div>

这是js：

$('#btnAdd').click(function(){
  $('#mainDiv').append(' <input type="checkbox" data-toggle="toggle"/>');
})

我输入的样式是bootstrap-toggle。

你能帮帮我吗？感谢

Answer 1

您必须重新初始化切换，因为初始化发生在文档加载上。不是在飞行中。

JsFiddle

        this.Then(/^I check that the calculated year from the current month\(if current month >= 6 ==> current year = current year \+ 2,else current year = current year \+ 1\)$/,function(callback) {

            var actualDate=new Date();
            var actualYear=actualDate.getFullYear();
            var actualMonth=actualDate.getMonth()+1;
            //expect(targetAmountPO.getYesInflationLabel().isDisplayed()).eventually.to.equal(true).then(callback);
            targetAmountPO.getYesInflationLabel().isDisplayed().then(function() {
                targetAmountPO.getYesInflationCorrectionAnswer().isSelected().then(function(){
                    targetAmountPO.getYesInflationLabel().getAttribute("outerText").then(function(text,callback){
                        //console.log(text);
                        var splittedString=text.split(":");
                        //console.log(splittedString[1]);
                        if(actualMonth>=6)
                        {
                            actualYear+=2;
                            var yearString=actualYear.toString();
                            console.log(yearString);
                             expect(yearString).to.eventually.contain(splittedString[1]).and.notify(callback);

                            //console.log(actualYear);

                        }
                        else
                        {
                             expect(actualYear+1).to.include(splittedString[1]).and.notify(callback);

                        }

                })

                })

            })


        })

描述：

在$('#btnAdd').click(function(){ var el = $(' <input type="checkbox" data-toggle="toggle"/>'); $('#mainDiv').append(el); el.bootstrapToggle(); })
将el附加到el
使用#mainDiv

Answer 2

您可以再使用一个解决方案https://jsfiddle.net/a3nq8aky/4/

$('#btnAdd').click(function(){
  $('#mainDiv')
    .append(' <input type="checkbox" data-toggle="toggle"/>')
    .find('input[type="checkbox"]')
    .last()
    .bootstrapToggle();
})

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<form>
  <div class="checkbox">
    <label>
      <input type="checkbox" data-toggle="toggle" checked="checked" />
      Toggle One
    </label>
  </div>
  <div id="mainDiv"></div>
  <div>
    <button type="button" class="btn btn-default" id="btnAdd">
      Add
    </button> 
  </div>
</form>

将checkbox追加到mainDiv后，使用jQuery last方法找到最新添加的元素，然后重新初始化为bootstrap toggle。

希望这会对你有所帮助。

jQuery追加失败的风格

2 个答案: