Question

我尝试写一个向导。因此我得到了一个显示元素：

<div class="ERd">
   <div class="wizardImage"><img src="wizimg/test.png"/></div>
   <div class="wizardRight" id="wr"><h3>Hi folks</h3>
      <div>Lets switch! <br/><br/>
         <div class="make-switch switch-mini" data-on-label="AN" data-off-label="AUS" id="sw1">
            <input class="toggle" type="checkbox"/>
         </div>number1<br/><br/>
      </div>
   </div>
</div>

不同的内容：

<div class="wizardContainer" id="f1">
   <div class="version">1.0.0</div>
   <div class="image">img.png</div>
   <div class="heading">Step 1</div>
   <div class="content">This is magic
      <div class="make-switch switch-mini" data-on-label="AN" data-off-label="AUS" id="sw2">
         <input class="toggle" type="checkbox"/>
      </div>number2<br/>
   </div>
</div>

我用显示元素填充内容：

function DisplayStep(id) {
    var container = $('#' + id);

    var wizVersion = container.find('.version').text();
    var wizImage = container.find('.image').text();
    var wizCategory = container.find('.category').text();
    var wizHeader = container.find('.heading').text();
    var wizContent = container.find('.content');

    $('.wizardSubtitle').text(wizCategory);
    $('.wizardImage img').attr('src', './wizimg/' + wizImage);
    $('.wizardRight h3').text(wizHeader);
    $('.wizardRight div').empty();
    $('.wizardRight div').append(wizContent);
}
Display('f1');

显示正确的内容，但动态功能似乎不起作用。准确地说，sw1工作，sw2不行。（sw2也正确呈现，但似乎是一个“上面”的图层，阻止将鼠标事件发送到sw2

Answer 1

精氨酸。得回答这个问题。问题似乎是，复制向导数据会创建两个具有相同ID的元素。

移动而不是复制解决了问题：

container.find('.content').appendTo('#wr');

有时写下来是解决方案的一半。我保留这个，因为我认为它也可能对其他人有用

动态加载时Javascript-UI-Element（Bootstrap-switch）无法正常工作

1 个答案: