我正在尝试使用带有jquery附加内容的切换按钮。附加的内容使用labelauty jquery插件来加载复选框及其正常工作。 但是切换按钮没有正确加载相关的CSS。
这是我的面板HTML代码,其中包括切换按钮。
<div class="col-md-6"> <div class="panel"> <div class="panel-body container-fluid"> <div id="testcases" class="accordion js-accordion"> <h4>Test<i class="fa fa-thumbs-o-down"></i> <small>CASES</small> <div class="toggle-wrap w-checkbox"> <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle()"> <label class="toggle-label w-form-label" for="Toggle-Switch"> </label> <div class="toggle"> <div class="toggle-active"> <div class="active-overlay"></div> <div class="top-line"></div> <div class="bottom-line"></div> </div> </div> </div> </h4> </div> <br> <button type="button" class="btn btn-info float-right" onclick="loadplan()">Add to Plan</button> </div> </div> </div> <!--TestPlan Panel--> <div class="Panel"> <div class="col-md-13"> <div class="panel"> <div class="panel-body container-fluid"> <h4>Test<i class="fa fa-thumbs-o-down"></i> <small>PLAN</small></h4> <!-- Start list --> <ul id="testplan" class="list-group"></ul> </div> <!-- End list --> </div> </div> </div>
哪个输出这个
before jquery append
这是我附加内容的jquery
//Load TestCase List to Accordion var testSuiteList; var currentTestSuite; function loadtestcases(testSuite, testcases) { currentTestSuite = testSuite; var testcases = testcases.split(","); // $("#testcases").empty(); $("#testcases div:not(:first)").remove(); var id = 0; // $("#testcases").append("<h4>Test<i class='fa fa-thumbs-o-down'></i> <small>CASES</small></h4>") testcases.forEach(function(entry) { id = id + 1; $("#testcases").append("<div class='accordion__item js-accordion-item'>" + "<div class='accordion-header js-accordion-header'>" + "<input type=\"checkbox\" class='to-labelauty-icon' name=\"inputLableautyNoLabeledCheckbox\" data-plugin=\"labelauty\" data-label=\"false\" id=\"labelauty-" + id + "\" value=\"" + entry + "\"> " + entry + "</div>" + "<div class='accordion-body js-accordion-body'>" + "<div class='accordion-body__contents'>" + "data-table" + "</div>" + "</div>" + "</div>" + "<div class='accordion__item js-accordion-item active'>" + "</div>") }); //accordion js for appended div var accordion = (function() { var $accordion = $('.js-accordion'); var $accordion_header = $accordion.find('.js-accordion-header'); var $accordion_item = $('.js-accordion-item'); // default settings var settings = { // animation speed speed: 400, // close all other accordion items if true oneOpen: false }; return { // pass configurable object literal init: function($settings) { $accordion_header.on('click', function() { accordion.toggle($(this)); }); $.extend(settings, $settings); // ensure only one accordion is active if oneOpen is true if (settings.oneOpen && $('.js-accordion-item.active').length > 1) { $('.js-accordion-item.active:not(:first)').removeClass('active'); } // reveal the active accordion bodies $('.js-accordion-item.active').find('> .js-accordion-body').show(); }, toggle: function($this) { if (settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) { $this.closest('.js-accordion') .find('> .js-accordion-item') .removeClass('active') .find('.js-accordion-body') .slideUp() } // show/hide the clicked accordion item $this.closest('.js-accordion-item').toggleClass('active'); $this.next().stop().slideToggle(settings.speed); } } })(); $(document).ready(function() { accordion.init({ speed: 300, oneOpen: true }); $(":checkbox").labelauty({ label: false }); }); } //Load the selected testcases on TestPlan function loadplan() { currentTestSuite; //Map the selected testcases to an array var selectedtclist = []; $('input[class="to-labelauty-icon labelauty"]:checked').each(function() { selectedtclist.push(this.value); }); for (var i = 0; i < selectedtclist.length; i++) { var tc_name = selectedtclist[i]; var searchWord = currentTestSuite + " " + "|" + " " + tc_name; // see if element(s) exists that matches by checking length var exists = $('#testplan li:contains(' + searchWord + ')').length; if (!exists) { //Append selected testcases to TestPlan $("#testplan").append("<li class='list-group-item list-group-item-info'>" + currentTestSuite + " " + "|" + " " + tc_name + "</li>"); } }; };
after loading jquery appended content
如何正确加载切换按钮的样式?
你使用 append() 对于选择器 $("#testplan") 但是我找不到那个身份证 id="testplan" 对于HTML代码中的任何元素,因此JS找不到它,因此无法对其“appand”任何内容。
append()
$("#testplan")
id="testplan"